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

问题

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:

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.');}
 })

来源：https://stackoverflow.com/questions/29734937/using-jquery-validators-valid-or-element-method-with-remote-methods

标签

javascript

jquery

jquery-validate