jQuery Validation with support Material Design + Masked Input Plugin - Form validation made easy
If you use Material Design from Google and you need form validation, then these are extensions for you.
Getting Started
Install Plugin
With bower
bower install --save jquery.validate.md With npm
npm install --save-dev jquery.validate.md Including it on your page
Include jQuery, jQuery Validation, jQuery Masked Input and the plugin on a page. Then select a material design form (Text field) to validate and call the initValidate method.
<form> <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon"> <input type="text" id="tf-outlined" class="mdc-text-field__input" data-error="error"> <label for="tf-outlined" class="mdc-floating-label">Your Name</label> <i class="material-icons mdc-text-field__icon" tabindex="0" role="button"></i> <div class="mdc-notched-outline"> <svg> <path class="mdc-notched-outline__path"/> </svg> </div> <div class="mdc-notched-outline__idle"></div> </div> <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" id="error" aria-hidden="true"></p> </form> <script src="jquery.js"></script> <script src="jquery.validate.js"></script> <script src="jquery.maskedinput.js"></script> <script src="jquery.validate.md.js"></script> <script> $('form').initValidate(); </script>The method takes the following arguments: rules = array, messages = array, debug = boolean
$('form').initValidate(rules, messages, debug);Example argument rules
var rules = { email: { required: true, minlength: 4, emailfull: true }, }New Validation Method
$.validator.addClassRules({ email: { emailfull: true }, tel: { requiredphone: true, minlengthphone: true }, name: { fio: true } });New Messages
$.validator.messages({ requiredphone: "This field is required.", minlengthphone: "Please enter a valid phone number.", fio: "Please enter a valid your real name" });You can override the methods and messages with jQuery Validation
License
Copyright © Vladislav Mager
Licensed under the MIT license.
