jQuery Validator Plugin won't update rules -
i have form has sections split tabs. entire form should validated when user submits form (i.e. input has focus , press enter or save button pressed) , i'd validate elements on first tab on click event of tab (other first 1 obviously) disallow moving tab before first tab's elements validated. problem seem continue running after first attempt @ validating rules , elements validated set , don't updated based on passing of different set of rules.
edit: clarify, can more see issue if click tab 2 fill out text 1 , text 2 , hit save, exact opposite.
any thoughts on matter appreciated. in advance!
this based on jquery validate plugin here: http://jqueryvalidation.org/
here's link fiddle: http://jsfiddle.net/fsb69/
<html> <head> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript"> var log = function(msg) { $('ul#log').append('<li>'+msg+'</li>'); }, validate_form = function(elements) { var params = { errorlabelcontainer: '#message-error', ignore: [], wrapper: 'li', onfocusout: false, onkeyup: false, rules: { text_1: 'required', text_2: 'required', text_3: 'required', text_4: 'required', }, debug:true }; if(elements) { $.each(params.rules, function(k, v) { if($.inarray(k, elements) < 0) { delete params.rules[k]; } }); } log('params: '+json.stringify(params)); return $('form[name=test-form]').validate(params).form(); }; $(function() { $('span.tab-click').click(function() { var self = $(this), selected = self.prop('id').replace('-click', ''), selected_index = selected.replace('tab-', ''), elements = ['text_1', 'text_2']; valid = true; if(selected_index > 1) { var valid = validate_form(elements); log('is valid? '+valid); } if(!valid) { return false; } $('div.tab').hide(); $('div#'+selected).show(); }); $('form[name=test-form]').submit(function(e) { var form = $(this); e.preventdefault(); var is_valid = validate_form(false); log('is valid? '+is_valid); if(is_valid) { log('success'); $('#message-error').empty().append('<li>form validated.</li>'); } }); }); </script> <style> form span { text-decoration: underline; color: blue; cursor: pointer; } </style> </head> <body> <form name="test-form"> <span id="tab-click-1" class="tab-click">tab 1</span> | <span id="tab-click-2" class="tab-click">tab 2</span><br /><br /> <div class="tab" id="tab-1"> <label for="text_1">text 1</label><input name="text_1" value="" /><br /> <label for="text_2">text 2</label><input name="text_2" value="" /><br /> </div> <div class="tab" id="tab-2" style="display:none;"> <label for="text_3">text 3</label><input name="text_3" value="" /><br /> <label for="text_4">text 4</label><input name="text_4" value="" /><br /> </div> <ul style="display:none; list-style-type: none;" id="message-error"></ul> <button type="submit">save</button> </form> <h4>log</h4> <ul id="log"></ul> </body> </html>
title: "jquery validator plugin won't update rules"
your root problem improper way you're handling .validate() call.
.validate() plugin's initialization method. cannot call repeatedly update rules, first call used, , subsequent calls ignored. expected usage .validate() called once on dom ready 1 particular form.
then later if need dynamically change rules, use the .rules('add') method. may seem counter-intuitive since may not "adding", available method. over-writing rule(s) new parameters and/or messages typical usage. remove rule entirely, use .rules('remove') method. when applying method multiple elements @ once, must wrap inside of jquery .each().
$('input[name^="field_"]').each(function() { $(this).rules('remove'); }); simple demo of rules() methods: http://jsfiddle.net/7ee5k/
also, refer answer simple example how validate form when it's split steps or sections: https://stackoverflow.com/a/18407211/594235
simple demo of multi-step form: http://jsfiddle.net/n9upd/
Comments
Post a Comment