Help me with jquery form validation

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

	<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?

Hi there,

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

www.vasterlosachampinjoner.se

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.

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 …

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?

Okey yeah im gonna try to sort that out=)

Well, the fields which fail validation get assigned a class of error, so you could use that:

.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:

$('#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.

Yes, use HTML5’s placeholder instead of the input tag’s value attribute.

E.g.

<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