Description
I have written a custom validator, much like the one mentioned in #371, as follows:
$.formUtils.addValidator({
name: 'group_one_nonzero',
validatorFunction: function (value, $el, config, language, $form) {
if (value != '' && value != 0) {
return true;
}
else {
var $others = $($el.data('groupothers')),
valid = false, i;
for(i = 0; i < $others.length; i++) {
var $this = $($others[i]);
if ($this.val() != '' && $this.val() != 0) {
valid = true;
}
}
return valid;
}
},
errorMessage: 'One of these values must be non-zero.',
errorMessageKey: 'badGroupOneNonzero'
});
$.validate();
I'm probably going to include both in a group module, but that's beside the point.
Let's say we have the following form:
<form id="MyForm">
<input id="One" type="number" min="0" max="24" value="0"
data-validation="group_one_nonzero" data-groupothers="#Other">
<input id="Other" type="number" min="0" max="30" step="30" value="0"
data-validation="group_one_nonzero" data-groupothers="#One">
<button type="submit">Submit</button>
</form>
and javascript to override the submit handler so that it submits the information via AJAX:
$('#MyForm').on('submit', function(e) {
e.preventDefault();
// fill this out with a rest endpoint you can use, or whatever
$.ajax({...});
});
Now. When I first submit the form, leaving both inputs as '0', if I place a breakpoint at line 1 of the validatorFunction
, it will return false for #One
, and submit is never called.
If I then change nothing and click Submit
again, it will call validatorFunction
for both #One
and #Other
, both turning red, having failed validation, but then the form will still submit.
Suggestions? This is obviously not the desired functionality. I might be doing something wrong, see jsfiddle below.
I've replicated this, sort of, on another page on my localhost, which actually fails them both and submits on the first try, instead of the second. Same result in this jsfiddle, without any other external libraries.