javascript - Row Validation with Jquery Validation plugin -
i have series of forms correspond likert questions:
<form class="indicator-form" request="post"> <fieldset> <label class="top-label"> enter number of <strong>category 1</strong> staff answered each level of importance on 5-point likert-field scale question:<br/> <em>question 1?</em> </label> <table> <tr class="likert"> <td> <label for="cat1_a">very unimportant</label> <input id="cat1_a" name="cat1_a" class="likert-field" type="text" /> </td> <td> <label for="cat1_b">unimportant</label> <input id="cat1_b" name="cat1_b" class="likert-field" type="text" /> </td> <td> <label for="cat1_c">neutral</label> <input id="cat1_c" name="cat1_c" class="likert-field" type="text" /> </td> <td> <label for="cat1_d">important</label> <input id="cat1_d" name="cat1_d" class="likert-field" type="text" /> </td> <td> <label for="cat1_e">very important</label> <input id="cat1_e" name="cat1_e" class="likert-field" type="text" /> </td> </tr> </table> </fieldset> <fieldset> <label class="top-label"> enter number of <strong>category 2</strong> staff answered each level of importance on 5-point likert-field scale question:<br/> <em>question 2?</em> </label> <table> <tr class="likert"> <td> <label for="cat2_a">very unimportant</label> <input id="cat2_a" name="cat2_a" class="likert-field" type="text" /> </td> <td> <label for="cat2_b">unimportant</label> <input id="cat2_b" name="cat2_b" class="likert-field" type="text" /> </td> <td> <label for="cat2_c">neutral</label> <input id="cat2_c" name="cat2_c" class="likert-field" type="text" /> </td> <td> <label for="cat2_d">important</label> <input id="cat2_d" name="cat2_d" class="likert-field" type="text" /> </td> <td> <label for="cat2_e">very important</label> <input id="cat2_e" name="cat2_e" class="likert-field" type="text" /> </td> </tr> </table> </fieldset> <input type="submit" value="submit data"/> </form> i want validate each table row that:
- if there no data in row, no validation applied (i.e. user can submit empty row)
- if there any data in row, fields must filled out.
my js:
// likert row validation jquery.validator.addmethod('likert', function(value, element) { var $inputs = $(element).closest('tr.likert').find('.likert-field:filled'); if (0 < $inputs.length && $inputs.length < 5 && !($(element).val())){ return false; } else { return true; } }, 'partially completed rows not allowed'); // likert fields jquery.validator.addclassrules('likert-field', { likert: true }); var validator = $('.indicator-form').validate({ errorplacement: function(error, element){ errorpos = element; errorclass = 'alert-arrow-center'; error.insertafter(errorpos).addclass(errorclass); } }); on face of it, validation works - if start playing around it, becomes clear rule applied fields blank when submit button clicked.
how can make validation rule applies fields unless there no data @ all?
jsfiddle here: http://jsfiddle.net/6rtcj/1/
it's behaving strangely because validation triggered 1 field @ time (unless click submit). if blank out data in 1 field, 1 field re-evaluated. why have messages lingering around on other fields.
it's not ideal, can force whole form re-validate on every keyup , blur event using valid() method this...
$('input').on('blur keyup', function() { $('.indicator-form').valid(); }); your demo: http://jsfiddle.net/6rtcj/20/
same idea, triggered blur event...
quote op:
"... becomes clear rule applied fields blank when submit button clicked."
if you're expecting validation messages appear on field after same field passes validation, that's not how plugin works.
there ways group messages using the groups option, may bit. can use errorplacement callback position 1 message whole row.
the way groups option works group error messages several fields 1 message... after fields in group pass validation, single message go away.
i've set onkeyup option false in example since fields share same message.
groups option demo: http://jsfiddle.net/6rtcj/22/
Comments
Post a Comment