1

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>
Community
  • 1
  • 1
user1032531
  • 24,767
  • 68
  • 217
  • 387
  • 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 Apr 19 '15 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 Apr 19 '15 at 22:55
  • So, with my example, use valid, right? How could I implement it? Thanks – user1032531 Apr 19 '15 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 Apr 19 '15 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 Apr 19 '15 at 23:03
  • Did you implement the solution [posted here](http://stackoverflow.com/a/3884995/1032531)? Did it work for you or not? – Sparky Apr 19 '15 at 23:26
  • Thanks Sparky. Please see https://jsfiddle.net/vctt9utd/ for the real intent. I think the validation is great, but I don't wish to redefine rules for other parts of the application which should follow the same rules of the traditional form validation page. I look forward to hearing your thoughts. Thanks again! – user1032531 Apr 20 '15 at 00:29
  • PS. Meant the validation "plugin" works great. Also, my solution to integrate to the editable plugin seems to work except for the remote validation plugins. PSS. Sorry about my earlier comment to your comment as I was not in a good position to reply. – user1032531 Apr 20 '15 at 00:44
  • Unfortunately, I don't have any experience with editable plugin, and we cannot even experiment with a jsFiddle because of the `remote` aspect. However, why can't you test the field with `.valid()` or `.element()` only after you've positively confirmed a response from the server? BTW - in your jsFiddle, where is the `remote` method utilized? – Sparky Apr 20 '15 at 01:14
  • The jsFiddle didn't include the `remote` method as I don't know how to deal with the `remote` aspect using jsFiddle, but when tested on my own server, the `remote` methods would return `true` on the first time only regardless of whether it should have been so. Like the implementation? I think it is pretty cool other than the inability to deal with remote methods. I regards to "only after you've positively confirmed a response from the server", you thinking of that other solution described by that post about 4 years ago? – user1032531 Apr 20 '15 at 01:38
  • If the other solution works, then use it. – Sparky Apr 20 '15 at 04:44
  • @Sparky The other solution does not work 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. – user1032531 Apr 20 '15 at 14:34
  • I think that if the `remote` rule is applied and you use `.valid()` on that same field, then it should wait for `remote` to complete, not skip the `remote` rule and tell you it's valid. I think you should report this as a bug to the developer on his GitHub page. – Sparky Apr 20 '15 at 14:49
  • @Sparky. https://github.com/jzaefferer/jquery-validation/issues/1465 – user1032531 Apr 20 '15 at 15:11
  • @Sparky Looks like this issue has previously been identified (https://github.com/jzaefferer/jquery-validation/issues/1045). I came up with a very poor solution and posted it as an answer. Any recommendations on how to improve? Thank you – user1032531 Apr 20 '15 at 20:30
  • who broke this thing? '.element' was returning 'undefined' and it was working perfectly. now it's broke. – Afshin Gh Apr 26 '15 at 21:20

1 Answers1

0

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.');}
 })
user1032531
  • 24,767
  • 68
  • 217
  • 387