All geek questions in one place

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

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

The jQuery validator element() method ( http://jqueryvalidation.org/Validator.element/ ) checks one element, returns true if it is valid, otherwise false.

When using remote methods during the first validation of the form, both methods incorrectly indicated that the element is being validated.

How to use valid() or element() using the remote validation method?

Stack Overflow.site/questions/1305033 / ... provides a solution, but it does not work properly with current versions of jQuery Validator. element() no longer returns undefined while an asynchronous call works like this.check( checkElement ) !== false (line 423 from version 1.1.1) returns only true or false . Thus, it is possible to arbitrarily pause 100 ms, but there is no check whether this corresponds to the correct amount of time.

By the way, my reason to ask this question is because I want to use jQueryValidator with inline editing. https://jsfiddle.net/vctt9utd/ shows a working example, with the exception of 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
source share
1 answer

Kind of a hack, but it seems to work. I don't like the way it initiates two ajax requests. I believe that I could dynamically change the rules to remove the remote method from the validator rules, however I would need to manually add the message. Technically, for my application, I do not need to display a message, but I use return input.next().html(); to receive the message as shown at 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.');} })
0
source

Source: https://habr.com/ru/post/1305035/

More articles:


All Articles