jquery validation stops page submit when non required field is empty - asp.net

Question

I'm using jquery to validate an asp.net form (content within a master page). The required fields validation all works great, but I have a field that is not required, but if it does have text then it needs to be in the proper format. Jquery validates incorrect text just fine, but when the text is empty it stops the form from submitting (no error message though). Anyone have an idea why this could be happening or what to do about it?
// Add validation rule for email
if ($("input[id$='TextBoxEmail']").length) {
$("input[id$='TextBoxEmail']").rules('add', {
required: false,
email: true,
messages: {
email: 'Please enter a valid email.'
}
});
}

Answer 1

I have just set up a similar test and cannot replicate the issue (see code below):
<script type="text/javascript">
$(document).ready(function () {
$("#test").validate();
if ($("input[id$='txtText']").length) {
$("input[id$='txtText']").rules('add', {
required: false,
email: true,
messages: {
email: 'Please enter a valid email.'
}
});
}
});
</script>
<form id="test">
<input type="text" id="txtText" />
<input type="submit" />
</form>
I am using jQuery 1.5.1 and the latest jquery.validate.min.js
I can only suggest that you make the jQuery selector more specific as id$='TextBoxEmail' means ends with 'TextBoxEmail'. This may be an issue if you have conflicting fields names?

Answer 2

We discovered that the workaround for this is to manually remove the validation based on our criteria.
// Add validation rule for first name (default Person type is Individual so the validation is needed as default)
if ($("input[id$='TextBoxFirstName']").length) {
$("input[id$='TextBoxFirstName']").rules('add', {
required: true,
messages: {
required: 'First Name is required for individuals.'
}
});
}
// Add event for checking if first name validation is needed
$('select[id$=DropDownListPersonType]').change(function () {
if ($('select[id$=DropDownListPersonType] option:selected').text() == 'Individual') {
// Add validation rule
$("input[id$='TextBoxFirstName']").rules('add', {
required: true,
messages: {
email: 'First Name is required for individuals.'
}
});
}
else {
// remove rule
$("input[id$='TextBoxFirstName']").rules("remove");
}
});