jQuery validation method is never being called

Question

I know I've been asking about jQuery validation a lot lately, but I think I have my problem boiled down to the bare essentials now.

So if I have this HTML page:

<html>
<head>
    <title>validation test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
</head>
<body>
    <form id="theform">
        <div id="num" name="num">86</div>
    </form>
    <script type="text/javascript">     
        var validationObject = {
            rules: {
                num: {
                  numtest:true
                }
            }
        };

        $.validator.addMethod("numtest", function(value, element) {
            return value == 42;
         });

        $('form').validate(validationObject);
        if ($("form").valid())
            alert("VALID");
        else
            alert ("INVALID");
    </script>
</body>
</html>

Then I expect the alert to be "INVALID" because num is 86 instead of 42. But instead I get "VALID"; the function I defined to do the validation is not being called (I set a breakpoint on return value == 42; and it never gets hit). Why is this? How can I make sure the validation function gets called?

I'm not familiar with the plugin but you're trying to perform validation on a div which isn't a form element — billyonecan
– billyonecan, Commented Feb 20, 2020 at 19:57
Yeah, the actual code I'm writing, it's a bit of a weird situation where I want to validate that a bunch of dropdowns all add up to the value in a div. So that's why I'm validating the div. But even if I change it to a text field, it still won't work... — ekolis
– ekolis, Commented Feb 20, 2020 at 21:37
Impossible. Changing to input type='text' fixes it: jsfiddle.net/c38uxh6m — Sparky
– Sparky, Commented Feb 21, 2020 at 1:51

Sparky · Accepted Answer · 2020-02-21 02:08:43Z

You're missing a validation error message in the custom method. You should also use this.optional(element) so that you can leave the field empty and use the required rule separately. (The way you had it written, the field would also be mandatory.)
```
$.validator.addMethod("numtest", function(value, element) {
    return this.optional(element) || (value == 46);
}, "validation error message");
```
Put the whole thing inside a ready handler, which ensures the form exists before the .validate() method is called. (However, this is not what was breaking your form because JavaScript was called after the HTML.)
This plugin does not recognize a div because it is not a valid form input element. Change it to an <input />, <select>, or <textarea> element.
```
<input type="text" id="num" name="num" />
```

Item #3 was the only thing that would break your code.

Working DEMO: jsfiddle.net/c38uxh6m/

Please carefully review the SO Wiki page and the multitude of online examples.

Collectives™ on Stack Overflow

jQuery validation method is never being called

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related