I am working on a large legacy Asp.Net webforms project. I have a field that hits our server to check for uniqueness on validation. Everything in this process is working except that the important field will validate on keyup after changing focus and then refocusing on the field. The field is a simple html input. I have tried setting onkeyup to false among other events. I have tried using a custom onkeyup. No matter what I try, the keyup validation keeps coming back.
The user will focus on the field and enter their data. During the initial entry, validation does not fire until focus changes. Then, when the user focuses on the field again, validation fires on every key up. I have to prevent this behavior to cut down on network traffic. Otherwise, I'd call it good and move on. Any advice is much appreciated. The following code is simplified from the project, but is still giving me the behavior mentioned. Please let me know if I can clarify anything.
jQuery v3.4.1 jQuery Validation Plugin - v1.19.0
<form id="form1" runat="server">
<div style="padding: 100px;">
<div class="control-group">
<label for="claimNumber" class="control-label" style="width: 200px;">Claim #*</label>
<div class="controls" style="margin-left:20px">
<input type="text" class="form-control span3" id="claimNumber" name="claimNumber" maxlength="128"/>
<button style="margin-left: 10px">Validate</button>
</div>
</div>
</div>
</form>
<script>
var isUsed;
var form = $("#form1").show();
var form1ValidationRules = {
rules: {
claimNumber: {
uniqueClaim: true,
required: true
}
}
};
var validateForm = function () {
$('input,select,textarea', 'div.hide').not('input[type=radio]').each(function () {
$(this).val('');
});
return $("#form1").validate(form1ValidationRules).form();
};
$(document).ready(function () {
$.validator.addMethod(
"uniqueClaim",
function () {
console.log("validating");
return (isUsed == false)
},
"Claim number is already in use for your company."
);
$('form#form1').validate(form1ValidationRules);
$('#myform').validate({
onkeyup: false
});
});
</script>
$('form#form1').validate(form1ValidationRules);
$('#myform').validate({
onkeyup: false
});
Where is $myform? That would be a form with id="myform". You seem to have attached .validate() to a form that does not exist in this code. This call would be ignored.
If it's supposed to be the same form and you fix the #myform selector, it still will not work because you've called .validate() twice on same form. This second call would be ignored.
If you're using Unobtrusive Validation plugin as part of your ASP project, then you're calling .validate() three times on the same form. The .validate() call automatically created by the Unobtrusive plugin is going to get called first and the others will be ignored.
The jQuery Validate plugin uses .validate() to initialize the plugin on your form ONE time. If .validate() is called multiple times, all subsequent calls will be ignored.
ASP users that have Unobtrusive in place typically use the .setDefaults() method to over-ride any jQuery Validate settings created by Unobtrusive. Keep in mind this would over-ride jQuery Validate settings for all forms on the page.