Home/ Questions/Q 8676563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:13:42+00:00

I think I’ve found a bug in the remote rule functionality of jquery validation

  • 0

I think I’ve found a bug in the remote rule functionality of jquery validation (bassistance). I tested it with jquery.validation 1.9.0 and 1.10.0.
Here is my HTML and JS:

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <script src="jquery-1.7.1.min.js"></script>
        <script src="jquery.validate.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function() {
                window.validater = $("#SignUpForm").validate({
                    rules: {
                        "initials": {
                            required: true
                        },
                        "lastname": {
                            required: true
                        },

                        "phonenumber": {
                            required: true,
                            remote: { url: "/checkPhoneNumber.php", async:false }
                        }
                    },
                    messages: {
                        "initials": {
                            required: "U heeft uw voorletters niet ingevuld"
                        },
                        "lastname": {
                            required: "U heeft uw achternaam niet ingevuld"
                        },
                        "phonenumber": {
                            required: "U heeft uw telefoonnummer niet ingevuld",
                            remote: "U heeft geen geldig telefoonnummer ingevuld (formaat: +311230123456).",
                        }
                    }
                });
            });
        </script>
        <form enctype="" name="SignUpForm" method="POST" action="" class="fbForm " id="SignUpForm" novalidate="novalidate">
            <div class="fbElement fbTextfield ">
                <label for="initials">Voorletters <span class="require">*</span> </label>
                <input type="text" name="initials" value="" style="" title="" class="activePlaceholder" id="initials">
                <label class="error" generated="true" for="initials" style="display: none;"></label>
            </div>

            <div class="fbElement fbTextfield ">
                <label for="prefix">Tussenvoegsel </label>
                <input type="text" name="prefix" value="" style="" title="" class="activePlaceholder" id="prefix">
                <label class="error" generated="true" for="prefix" style="display: none;"></label>
            </div>

            <div class="fbElement fbTextfield ">
                <label for="lastname">Achternaam <span class="require">*</span> </label>
                <input type="text" name="lastname" value="" style="" title="" class="activePlaceholder" id="lastname">
                <label class="error" generated="true" for="lastname" style="display: none;"></label>
            </div>    

            <div class="fbElement fbTextfield ">
                <label for="phonenumber">Telefoonnummer <span class="require">*</span> </label>
                <input type="text" name="phonenumber" style="" value="+311230123456" class="activePlaceholder" id="phonenumber">
                <label class="error" generated="true" for="phonenumber" style="display: none;"></label>
            </div>

            <div style="" class="fbContainer  " id="navContainer">
                <button data-loading-text="Laden..." onclick="" value="Verder" name="SignupFB_NextFB_next" class="submit " type="Submit" id="SignupFB_NextFB_next">Verder</button>
            </div>
        </form>
    </body>
</html>

As you may notice: I have a remote rule on the phonenumber field. The remoterule itself works fine. For testing purpose my checkPhoneNumber.php contains:

<?php
$valid = 'false';
echo $valid;

I really need the async:false. Otherwise I can’t submit my form when I do not first click the phonenumber field manually to trigger the ajax-request. This is a known problem on stackoverflow. However when I add async:false no validation-messages apears on the fields above. Fields below the phonenumber field does not have this problem. When I move the phonenumber field above the initials-field there is no problem with the validation-messages.

Does anyone know how to solve this problem, or knows a walk-around?

Thanks in advance,

William

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found in jquery.validate.js (v1.10.0 – 9/7/2012) that in the showErrors function is called when all rules are validated and again invoked seperately when the remote-rule is finished.

    When the remote-rule finishes and the showErrors function is called this.errorList will be reset. But at that point the this.errorList variable will contain the previous validation messages.

    Commenting the this.errorList = []; will fix above problem. I don’t know if it breaks anything else.

    edit:
    It doesn’t fail in the provided testcases.

    showErrors: function(errors) {
        if(errors) {
            // add items to error list and map
            $.extend( this.errorMap, errors );
            //this.errorList = [];
            for ( var name in errors ) {
                this.errorList.push({
                    message: errors[name],
                    element: this.findByName(name)[0]
                });
            }
            // remove items from success list
            this.successList = $.grep( this.successList, function(element) {
                return !(element.name in errors);
            });
        }
        if (this.settings.showErrors) {
            this.settings.showErrors.call( this, this.errorMap, this.errorList );
        } else {
            this.defaultShowErrors();
        }
    }
    • 0