Using jQuery validator's valid() or element() method with remote methods

Question

jQuery validator valid() method ( http://jqueryvalidation.org/valid) checks whether the selected form is valid or whether all selected elements are valid.

jQuery validator element() method (http://jqueryvalidation.org/Validator.element/) validates a single element, returns true if it is valid, false otherwise.

With remote methods, however, the first time the form is checked, both methods incorrectly indicated that the element passes validation.

How can I use either valid() or element() with a remote validation method?

https://stackoverflow.com/a/3884995/1032531 provides a solution but it does not work properly with current versions of jQuery Validator. element() no longer returns undefined while the asynchronous call is running as this.check( checkElement ) !== false (line 423 of v1.13.1) will only return true or false. As such, one could arbitrarily pause 100 ms, but there is no check whether this is the correct amount of time.

By the way, my reason for asking this question is that I wish to use jQueryValidator with inline editing. https://jsfiddle.net/vctt9utd/ shows a working example except for remote methods.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                var validator=$("#myForm").validate({
                    rules: {
                        bla: {
                            minlength:2,
                            maxlength:4,
                            required:true,
                            remote: "validate.php"
                        }
                    },
                    messages: {
                        bla: {
                            remote:"error message"
                        }
                    }
                });

                $('#testit').click(function(){
                    $('#bla').val('test');
                    console.log($('#bla').valid());
                    console.log(validator.element('#bla'));
                })
            });
        </script>
    </head>

    <body>
        <form id="myForm" method="post">
            <input name="bla" id="bla" value="" readonly>
        </form>
        <button id="testit">testit</button>
    </body> 
</html>

1. .valid() can also be attached to a single element. I use .valid() outside of the plugin's methods and element() when I'm inside of any of the plugin's methods. — Sparky
– Sparky, Commented Apr 19, 2015 at 22:53
2. Please better explain your root problem and why you're asking? When using remote, you normally do not need to use .valid() or .element(). The remote method automatically handles everything depending on the server response. Otherwise, the answer you've linked, seems to provide a solution. — Sparky
– Sparky, Commented Apr 19, 2015 at 22:55
So, with my example, use valid, right? How could I implement it? Thanks — user1032531
– user1032531, Commented Apr 19, 2015 at 22:57
Use .valid() for what? What is the root problem you're trying to solve? Like I said, you normally don't need to use .valid() or .element() with remote. — Sparky
– Sparky, Commented Apr 19, 2015 at 22:58
Yes, looking at your click() handler, I'd use .valid() if it works. Otherwise, use either one. If you were writing a function that goes inside a custom method or inside .validate(), then definitely stick with .element(). — Sparky
– Sparky, Commented Apr 19, 2015 at 23:03

user1032531 · Accepted Answer · 2015-04-20 20:23:08Z

Kind of a hack, but it seems to work. I don't like how it initiates two ajax requests. I suppose I could dynamically change the rules to remove the remote method from validator's rules, however, then I would need to manually add the message. Technically for my application, I don't need the message displayed, but am using return input.next().html(); to get the message as shown in https://jsfiddle.net/vctt9utd/.

http://jsfiddle.net/msprwad5/

<form id="myForm" method="post">
    <input name="myelement" id="myelement" value="">
</form>
<button id="testit">testit</button>

 var validator = $("#myForm").validate({
     rules: {
         myelement: {
             minlength: 2,
             maxlength: 4,
             required: true,
             remote: {
                 url: "/echo/html/",
                 type: "POST",
                 data: {
                     html: 0,
                     delay: .5
                 }
             }
         }
     },
     messages: {
         myelement: {
             remote: "error message"
         }
     }
 });

 $('#testit').click(function () {
     if ($('#myelement').valid()) {
         $.post("/echo/html/", {
             html: 0,
             delay: .5
         }, function (status) {
             if(!+status){alert('failed remote validation');}
         });
     }
     else {alert('failed normal validation if first attempt, otherwise could be either.');}
 })

Collectives™ on Stack Overflow

Using jQuery validator's valid() or element() method with remote methods

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related