jQuery validate - mutually exclusive validation - want to ignore default Message
Hi,
I have two text boxes in the page. The validation is either of them should be entered but not both.
I have to show error message when the page is submitted either both of them empty or both of them entered.
I have this working, but in addition I am getting the default error message saying "Warning: No message defined for <text_control_name>", which I do not want. In fact in the validate method I did not declare any messages but I am using the showErrors() method to show the error message based on condition.
Is there a way to ignore/hide/suppress the default error message or the warning message shown above.
Thanks in advance.
Regards,
Uresh
PS: Code below:
- <script>
$.validator.addMethod(
"contactSearch",
function(value, element, param) {
var validator = this;
var inputNumber = $('#contactNumber').val();
var inputName = $('#contactName').val();
if(inputNumber != "" && inputName != ""){
var errors = {};
errors[element.name] = "Either of the inputs should be entered";
validator.showErrors(errors);
return false;
} else if(inputNumber == "" && inputName == ""){
var errors = {};
errors[element.name] = "Cannot enter both values";
validator.showErrors(errors);
return false;
}
return true;
}
);
function addContactFormValidation() {
$('#contactForm').validate({
errorContainer: "#errorContainer",
errorLabelContainer: "#errorContainer",
errorElement: "li",
rules:{
contactNumber: "contactSearch",
contactName : "contactSearch"
}
});
}
function initiateInputElements(){
$("#ajaxSubmit").click(function(event) {
if($('#contactForm').valid()){
//submit ajax request
}
});
}
$(function(){
initiateInputElements();
addContactFormValidation();
});
</script>
- <form id="contactForm">
<table>
<tr>
<td>Contact ID</td>
<td>
<input type="text" id="contactNumber" name="contactNumber"/>
</td>
</tr>
<tr>
<td colspan="2">
OR
</td>
</tr>
<tr>
<td>Contact Name:</td>
<td>
<input type="text" id="contactName" name="contactName"/>
</td>
</tr>
</table>
<input type="button" id="ajaxSubmit" value="Proceed"/>
<ul id="errorContainer"></ul>
</form>