Hey all, this is my first post here. I have tried desperately for hours and hours to find a solution to this problem but so far no luck.
I have a dynamic form that will show/hide certain parts based on the value of a select box. I am also using the errorContainer option to display all errors together in a seperate div. My problem is that the errorContainer is not hiding itself when there are zero errors. I suspect this is because the numberOfInvalids is out of wack with what is actually on the page. I am manually hiding errors for form elements that no longer exist, which is causing the validate plugin to become confused. If the validate plugin could validate onChange of a select box that may help me out, but I haven't found a way to make that happen. Instead of writing a book about the issue I will just show you a working example and maybe someone can help me out. There are 2 files here, test-1-1.html and test-1-1.js. Not included are jquery and the validate plugin. The easiest way to observe the error is: select 1 borrower, click submit, select 0 borrowers ("Please Select")... //------------------------------------------------------- test-1-1.js--------------------------------------------------------------// $(document).ready(function(){ // form validation $("form").validate({ debug: true, onkeyup: false, ignore: '.ignore', rules:{ numBorrowers:{ notZero: true, }, borrower1FName:{ required: true, }, borrower1MName:{ required: true, }, borrower1LName:{ required: true, }, borrower2FName:{ required: true, }, borrower2MName:{ required: true, }, borrower2LName:{ required: true, }, primaryContact:{ required: true, }, }, messages:{ numBorrowers:{ notZero: 'Please choose the number of loan applicants.', }, borrower1FName:{ required: 'Please enter Borrower 1\'s first name.', }, borrower1MName:{ required: 'Please enter Borrower 1\'s middle name.', }, borrower1LName:{ required: 'Please enter Borrower 1\'s last name.', }, borrower2FName:{ required: 'Please enter Borrower 2\'s first name.', }, borrower2MName:{ required: 'Please enter Borrower 2\'s middle name.', }, borrower2LName:{ required: 'Please enter Borrower 2\'s last name.', }, primaryContact:{ required: 'Please choose the primary contact for this loan.', }, }, highlight: function(element){ $(element.form).find("label[for="+element.id +"]") .addClass('error'); }, unhighlight: function(element){ $(element.form).find("label[for=" + element.id + "]") .removeClass('error'); }, errorContainer: "#applicationErrorMessage", errorLabelContainer: "#applicationErrorMessage ul", wrapper: "li", }); $.validator.addMethod("notZero", function(value){ if(value == 0) return false; else return true; }); // functions function borrower1AddValidation(){ $('.borrower1').removeClass('ignore'); } function borrower2AddValidation(){ $('.borrower2').removeClass('ignore'); } function borrower1RemoveValidation(){ // remove validation $('.borrower1').addClass('ignore'); // remove highlighting next to input $('td > label[for^="borrower1"]').removeClass('error'); // hide error msgs $('li > label[for^="borrower1"]').parent().hide(); } function borrower2RemoveValidation(){ $('.borrower2').addClass('ignore'); $('td > label[for^="borrower2"]').removeClass('error'); $('li > label[for^="borrower2"]').parent().hide(); $('li > label[for="primaryContact"]').parent().hide(); } // inital page setup $('#applicationErrorMessage').hide(); var numBorrowers = document.getElementById('numBorrowers'); if(numBorrowers.selectedIndex == 0){ $('#borrower1Section, #borrower2Section').hide(); $('.borrower1, .borrower2').addClass('ignore'); } if(numBorrowers.selectedIndex == 1){ $('#borrower2Section').hide(); //borrower1AddValidation(); $('.borrower2').addClass('ignore'); } // event handlers $('#submitButton') .click(function(){ if($("form").validate().form()){ sendVars('#submitButton'); } // debug output console.log('visible errors: '+$('#applicationErrorMessage li:visible').length); console.log('invalids: '+$('form').validate().numberOfInvalids()); }) .css("cursor","pointer"); $("#numBorrowers").change(function(){ var value = document.getElementById('numBorrowers'); if(value.selectedIndex == 0){ if($("#borrower1Section").is(":visible")){ $("#borrower1Section").slideUp(700); } if($("#borrower2Section").is(":visible")){ $("#borrower2Section").slideUp(700); } borrower1RemoveValidation(); borrower2RemoveValidation(); } if(value.selectedIndex == 1){ if($("#borrower1Section").is(":hidden")){ $("#borrower1Section").slideDown(700); } if($("#borrower2Section").is(":visible")){ $("#borrower2Section").slideUp(700); } borrower1AddValidation(); borrower2RemoveValidation(); } if(value.selectedIndex == 2){ if($("#borrower1Section").is(":hidden")){ $("#borrower1Section").slideDown(700); } if($("#borrower2Section").is(":hidden")){ $("#borrower2Section").slideDown(700); } borrower1AddValidation(); borrower2AddValidation(); } // debug output console.log('visible errors: '+$('#applicationErrorMessage li:visible').length); console.log('invalids: '+$('form').validate().numberOfInvalids()); }); function sendVars(command){ var caller = command; alert('saved!\ncalled by '+command); return false; } }); //------------------------------------------------------- test-1-1.html--------------------------------------------------------------// <html> <head> <title>Test 1-1</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="test-1-1.js"></script> <style type="text/css"> .error { color:red; } </style> </head> <body> <!-- IF Error, post here. --> <div id="applicationErrorMessage"> <p class="error"><strong>Oops!</strong> Please correct the highlighted fields before continuing.</p> <ul class="error" id="errorList"> </ul> </div> <!-- END Error --> <form action=""> <h4><a name="q1"></a>1. What will be the purpose of this loan?</h4> <table width="518" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> <p> <label> <input type="radio" name="propertyType" value="new" id="loanPurpose_0" checked="checked" > Purchase </label> </p> </td> </tr> <tr> <td> </td> <td> <p> <label> <input type="radio" name="propertyType" value="refinance" id="loanPurpose_1" > Refinance </label> </p> </td> </tr> </table> <h4><a name="q2"></a>2. How many people will be applying for this loan?</h4> <table width="518" border="0" cellspacing="0" cellpadding="0" > <tbody> <!-- How many borrowers? --> <tr> <td> </td> <td> <select name="numBorrowers" id="numBorrowers"> <option value="0" selected="selected" >Please Select</option> <option value="1">1 Borrower</option> <option value="2">2 Borrowers</option> </select> </td> </tr> </tbody> </table> <div id="borrower1Section"> <table> <tbody> <!-- Borrower 1 Info --> <tr> <td colspan="2">Name of Borrower 1:</td> </tr> <tr> <td><label for="borrower1FName">First Name:</label></td> <td> <input type="text" name="borrower1FName" id="borrower1FName" class="borrower1" /> </td> </tr> <tr> <td><label for="borrower1MName">Middle Name:</label></td> <td> <input type="text" name="borrower1MName" id="borrower1MName" class="borrower1" /> </td> </tr> <tr> <td><label for="borrower1LName">Last Name:</label></td> <td> <input type="text" name="borrower1LName" id="borrower1LName" class="borrower1" /> </td> </tr> </tbody> </table> </div> <div id="borrower2Section"> <table> <tbody > <!-- If two borrowers show borrower 2 info field. --> <tr> <td colspan="2">Name of Borrower 2:</td> </tr> <tr> <td><label for="borrower2FName">First Name:</label></td> <td> <input type="text" name="borrower2FName" id="borrower2FName" class="borrower2" /> </td> </tr> <tr> <td><label for="borrower2MName">Middle Name:</label></td> <td> <input type="text" name="borrower2MName" id="borrower2MName" class="borrower2" /> </td> </tr> <tr> <td><label for="borrower2LName">Last Name:</label></td> <td> <input type="text" name="borrower2LName" id="borrower2LName" class="borrower2" /> </td> </tr> <tr> <td colspan="2">Who is the primary contact for this loan?</td> </tr> <tr> <td> </td> <td> <p> <label> <input type="radio" name="primaryContact" value="borrower1" id="primaryContact_0" class="borrower2" /> Borrower 1 <!-- Replace with name --> </label> </p> </td> </tr> <tr> <td> </td> <td> <p> <label> <input type="radio" name="primaryContact" value="borrower2" id="primaryContact_1" class="borrower2" /> Borrower 2 <!-- Replace with name --> </label> </p> </td> </tr> </tbody> </table> </div> <!-- end borrower2 div --> </form> <button type="button" id="submitButton">Submit</button> </body> </html>