jQuery Validation Plugin
jQuery ValidationThis 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-erroror data-successattributes to your input field labels.
Form validation with placeholder
Add class .left-alertto show error message in left align.
Form validation with icons
Add class .right-alertto show error message in right align.