SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help me with jquery form validation.

    Soo... i have this very simple form validation for my contactform which looks like this:

    Code JavaScript:
    	<script type="text/javascript">
    	$(document).ready(function () {
     
    	    $('#contactform').validate({ // initialize the plugin
    	        rules: {
    	            name: {
    	                required: true,
    	                minlength: 5
    	            },
    	            email: {
    	                required: true,
    	                email: true
    	            },
    	           	message: {
    	                required: true,
    	                minlength: 20
    	            }
    	        }
    	    });
     
    	});
    	</script>

    And it does what it is supposed to... but the thing is... atm im getting the "field required" text above an empty input field if i leave it blank, but what I want is the inputfield to get a red border/focus and nothing more. I don't want the "field required" text etc... ONLY a red border for a more clean look.

    Anyone know how i can archieve this?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Can you post a link to the page this is happening on?

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Can you post a link to the page this is happening on?
    www.vasterlosachampinjoner.se

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Also, one other thing you might want to look at:

    When I enter something into one of the fields and it is flagged as incorrect, when I click back into the field to alter my initial entry, the field is cleared automatically and I have to start over.
    Not very user friendly ...

  5. #5
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Also, one other thing you might want to look at:

    When I enter something into one of the fields and it is flagged as incorrect, when I click back into the field to alter my initial entry, the field is cleared automatically and I have to start over.
    Not very user friendly ...
    Okey yeah im gonna try to sort that out=)

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    As far as I can see, the script is doing what it should.

    You have two input fields "name" and "email", as well as a textarea "message" and in the rules that you posted above, you have marked all of them as required.

  7. #7
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    As far as I can see, the script is doing what it should.

    You have two input fields "name" and "email", as well as a textarea "message" and in the rules that you posted above, you have marked all of them as required.
    Yeah. Maby I was unclear, i want it to do what it does, but instead of echoing out "field required" etc when i leave something blank, i want the field to get a red border.... so... no text just red border=) Is this possible to do?

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Well, the fields which fail validation get assigned a class of error, so you could use that:

    Code CSS:
    .error{ border: 1px solid red; }

    As for the error messages, you can remove them in a number of ways.
    However before doing so consider whether this a good idea, as it will stop users from submitting the form without giving them a reason why.
    If you're sure this is what you want to do, I believe this will work:

    Code JavaScript:
    $('#contactform').validate({ 
      rules: {
        name: {
          required: true,
          minlength: 5
        },
        email: {
          required: true,
          email: true
        },
        message: {
          required: true,
          minlength: 20
        }
      } ,
      messages: {
        "name": "",
        "email": "",
        "message": ""
      }
    });

  9. #9
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Well, the fields which fail validation get assigned a class of error, so you could use that:

    Code CSS:
    .error{ border: 1px solid red; }

    As for the error messages, you can remove them in a number of ways.
    However before doing so consider whether this a good idea, as it will stop users from submitting the form without giving them a reason why.
    If you're sure this is what you want to do, I believe this will work:

    Code JavaScript:
    $('#contactform').validate({ 
      rules: {
        name: {
          required: true,
          minlength: 5
        },
        email: {
          required: true,
          email: true
        },
        message: {
          required: true,
          minlength: 20
        }
      } ,
      messages: {
        "name": "",
        "email": "",
        "message": ""
      }
    });
    thanks.

    another thing, do you know how to make the validation to ignore the input values that are already there like "your name here", atm the validation accept that as a name.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ReGGaeBOSS View Post
    do you know how to make the validation to ignore the input values that are already there like "your name here", atm the validation accept that as a name.
    Yes, use HTML5's placeholder instead of the input tag's value attribute.

    E.g.

    HTML Code:
    <input id="name" name="name" type="text" placeholder="your name" required />
    Further reading: http://davidwalsh.name/html5-placeholder
    Compatibility: http://caniuse.com/input-placeholder
    Fallback: https://github.com/mathiasbynens/jquery-placeholder


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •