Description
Your environment
- Version of
jquery-validate: 1.20.0 - Browser name and version: Firefox - 115.12.0esr (64-bit), Google Chrome - Version 109.0.5414.120 (Official Build) (64-bit), Microsoft Edge - Version 109.0.1518.140 (Official build) (64-bit)
Current behavior
There appears to be a validation bug when using the remote method (https://jqueryvalidation.org/remote-method/) in the latest 1.20.0 version of the plugin.
It can be triggered a number of different ways, but the steps below are one simple way of triggering it (using the demo code provided):
- Click or tab inside the field, and enter 20 (an invalid number), then click or tab outside the field.
- A validation failure message should appear.
- Click or tab inside the field again, this time highlight the 0, and overwrite it with 1, to update the number to 21 (a valid number), then quickly click or tab outside the field before the AJAX function returns a result.
- The field should now be valid, but the previous validation failure message does not disappear, the field is not considered valid, and the form can not be submitted.
Or you can do the reverse, enter 21, update it to 20, then the field is invalid, but is considered valid, and the form can be submitted.
It's worth noting the bug will not be triggered when:
- Deleting and retyping the numbers, as opposed to overwriting them.
- Overwriting a 1 digit number with a 2 digit number, etc.
- Waiting for the AJAX function to complete before clicking or tabbing outside the field.
The bug does not appear to be present when using the 1.19.5 version of the plugin.
Expected behavior
Validation should function correctly when following the steps above.
Live demo
HTML / jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery validation - test - v1.20.0</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>
<script>
(function ($, root, undefined) {
$(function () {
'use strict';
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
$("#test_form").validate({
rules: {
test_field: {
required: true,
remote: {
url: 'https://example.com/wp-admin/admin-ajax.php',
type: 'post',
data: {
'action': 'test_function_1',
'test_field_val': function() {
return $('#test_field').val();
},
},
}
},
},
});
});
});
})(jQuery, this);
</script>
</head>
<body>
<form class="test_form" id="test_form" method="get" action>
<fieldset>
<p>
<label for="test_field">Enter a number greater than 20:</label>
<input id="test_field" name="test_field" type="text">
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
PHP for remote AJAX function (using Wordpress):
function ajax_test_function_1() {
$test_field_val = $_POST['test_field_val'];
if( $test_field_val > 20 ) {
echo json_encode(true);
} else {
echo json_encode('Error - number is not greater than 20');
}
die();
}
add_action( 'wp_ajax_test_function_1', 'ajax_test_function_1' );
add_action( 'wp_ajax_nopriv_test_function_1', 'ajax_test_function_1' );