JQuery-Validate dynamically updating rules not working -
jquery: 1.9.1 jquery-validate: 1.11.1
i have user profile page presented user. want make input fields required , validated when user makes change special field (password or new password). however, rules half work , form permitted post. if force rules (like 'fullname' , 'displayname') work. can not dynamically update validation rules? doing wrong?
<script type="text/javascript"> $(document).ready( function() { function updaterules() { var mlen = $('#passwordnew').val().length; if (mlen > 0) { $('#passwordold').rules('add', {required: true, minlength: 6}); $('#passwordold').attr('required', 'true'); $('#passwordnew').rules('add', {required: true, notequal: '#passwordold'}); $('#passwordnew').attr('required', 'true'); $('#passwordconf').rules('add', {required: true, equalto: '#passwordnew'}); $('#passwordconf').attr('required', 'true'); } else { $('#passwordold').rules('remove'); $('#passwordold').attr('required', 'false'); $('#passwordnew').rules('remove'); $('#passwordnew').attr('required', 'false'); $('#passwordconf').rules('remove'); $('#passwordconf').attr('required', 'false'); } } // change $('#passwordold').change(updaterules); $('#passwordnew').change(updaterules); // popover $('#profile :input').hover( function() { $(this).popover('show') }, function() { $(this).popover('hide') } ); // validation $('#profile').validate( { rules: { displayname: {required: false, minlength: 2}, emailnew: {required: false, email: true}, fullname: {required: true, minlength: 5}, }, messages: { displayname: { minlength: "{{ lang::line( 'user.profile.displayname.validate.minlength' ) -> get() }}", }, emailnew: { email: "{{ lang::line( 'user.profile.emailnew.validate.email' ) -> get() }}" }, fullname: { required: "{{ lang::line( 'user.profile.fullname.validate.required' ) -> get() }}", minlength: "{{ lang::line( 'user.profile.fullname.validate.minlength' ) -> get() }}", }, passwordold: { required: "{{ lang::line( 'user.profile.passwordold.validate.required' ) -> get() }}", minlength: "{{ lang::line( 'user.profile.passwordold.validate.minlength' ) -> get() }}", }, passwordnew: { required: "{{ lang::line( 'user.profile.passwordnew.validate.required' ) -> get() }}", minlength: "{{ lang::line( 'user.profile.passwordnew.validate.minlength' ) -> get() }}", notequal: "{{ lang::line( 'user.profile.passwordnew.validate.notequal' ) -> get() }}", }, passwordconf: { required: "{{ lang::line( 'user.profile.passwordconf.validate.required' ) -> get() }}", equalto: "{{ lang::line( 'user.profile.passwordconf.validate.equalto' ) -> get() }}" } }, errorclass: "help-inline", errorelement: "span", highlight: function(element, errorclass, validclass) { $(element).parents('.control-group').addclass('error'); }, unhighlight: function(element, errorclass, validclass) { $(element).parents('.control-group').removeclass('error'); $(element).parents('.control-group').addclass('success'); } } ); } ); </script>
.validate() initialization plugin, supposed called once on dom ready.
$(document).ready(function() { // validation initialization $('#profile').validate({ // options , rules }); function updaterules() { // code } // change $('#passwordold').change(updaterules); $('#passwordnew').change(updaterules); // popover $('#profile :input').hover( function() { $(this).popover('show') }, function() { $(this).popover('hide') } ); });
Comments
Post a Comment