jquery form validation phần 2
RUN
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Conditional Demo</title> <style> .success{border: solid 1px blue;} .error {border:solid 1px red;} </style> <script src="https://freetuts.net/public/javascript/jquery_validate/jquery-1.9.0.min.js"></script> <script src="https://freetuts.net/public/javascript/jquery_validate/jquery-validate.js"></script> <script> $(document).ready(function(){ $('form').validate({ onKeyup: true, eachValidField: function() { $(this).removeClass('error').addClass('success'); }, eachInvalidField: function() { $(this).removeClass('success').addClass('error'); }, // Conditional dùng để tạo các rule kiểm tra điều kiện riêng // và kết quả trả về của mỗi rule là true/false // Mỗi rule sẽ có tên trùng với khai báo data-conditional="checkpassword" conditional: { checkpassword : function() { return $(this).val() == $('#password').val(); } } }); }); </script> </head> <body> <form id="form"> <div> <input type="text" name="username" id="username" data-required /> <label for="username">Username</label> </div> <div> <input type="text" name="password" id="password" data-required /> <label for="password">Password</label> </div> <div> <input type="text" name="confirm" id="confirm" data-required data-conditional="checkpassword" /> <label for="confirm">Confirm</label> </div> <div> <button type="submit">Send</button> <button type="reset">Reset</button> </div> </form> </body> </html>
PHÓNG TO