jQuery Validation Plugin
jQuery Validation This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.
Validations example
Simple jQuery Validation script to validate your form inputs.
$("#formValidate").validate({
rules: {
uname: {
required: true,
minlength: 5
},
cemail: {
required: true,
email:true
},
password: {
required: true,
minlength: 5
},
cpassword: {
required: true,
minlength: 5,
equalTo: "#password"
},
curl: {
required: true,
url:true
},
crole:"required",
ccomment: {
required: true,
minlength: 15
},
cgender:"required",
cagree:"required",
},
//For custom messages
messages: {
uname:{
required: "Enter a username",
minlength: "Enter at least 5 characters"
},
curl: "Enter your website",
},
errorElement : 'div',
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
});
Materialize default error and success messages
Materialize admin theme has built in custom error or success messages, You can add custom validation messages by adding either data-error or data-success attributes to your input field labels.
Form validation with placeholder
Add class .left-alert to show error message in left align.
Form validation with icons
Add class .right-alert to show error message in right align.