Jquery Addclassrules Example - Jquery
How to validate form using jquery validator?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Addclassrules creates a custom message and applies that class to all fields. This jquery code validate a simple registration form. You need a validate plugin to run this code.
<html>
<head>
<!-- Load jQuery and the validate plugin -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<!-- jQuery Form Validation code -->
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
// Specify the validation error messages
messages: {
firstname: "<font color='red'>Please enter your first name</font>",
lastname: "<font color='red'>Please enter your last name</font>",
password: {
required: "<font color='red'>Please provide a password</font>",
minlength: "<font color='red'>Your password must be at least 5 characters long</font>"
},
email: "<font color='red'>Please enter a valid email address</font>",
agree: "<font color='red'>Please accept our policy</font>"
},
submitHandler: function(form) {
// form.submit();
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<!-- The form that will be parsed by jQuery before submit -->
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" />
<div class="label">Email</div><input type="text" id="email" name="email" />
<div class="label">Password</div><input type="password" id="password" name="password" />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html>
