jQuery validator plugin

JavaScript
1

I am new to this and not finding much documentation that isn’t written for the advanced. It’s been a frustrating day to try to understand a little more about client side validation.

In any event, I am able to use the validator if I simply put the code

<script>
	$(document).ready(function(){
		$(".form-std").validate();
	});
</script>

in the head tag. I then class the form items and it seems to work okay. I can also add a .error style to the page head and it will style the errors to some extent.

Is this how it is supposed to work and does it do more regarding formatting, etc. or do I have to write that using jQuery.

Also, does anyone know any good tutorials on this? Thanks

2

Thanks, I appreciate the input

3

Formatting and styling the labels\inputs should be done with CSS. You can style them individually with something like this:


<style type="text/css">
input.error {
font-weight: bold;
}

label.error {
padding: 0px 0px 0px 10px;
color: #000000;
}
</style>

And have you checked out http://docs.jquery.com/Plugins/Validation?

The validation plugin is a dream to use once you learn it. The layout is easy, say I wanted to validate a login form with the following HTML.


<form method="POST" action="login.php" id="frmLogin">
<p><label for="username">Username:</label><input type="text" name="username" /></p>
<p><label for="password">Password:</label><input type="password" name="password" /></p>
<input type="submit" value="Login" />
</form>

I would use the following jQuery code to do it.


$(document).ready(function() {
$('#frmLogin').validate({
rules: {
username: { required: true, minlength: 6 },
password: { required: true, minlength: 6 }
}
});
});

Check out some of the examples at the link I posted above. Good luck