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>
