Skip to content

Custom validator working for first submit, but doesn't prevent second submit #372

Closed
@FireSBurnsmuP

Description

@FireSBurnsmuP

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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions