0

I am new stackoverflow and first want to extend my appreciate to all the contributors. This has been a very helpful resource and I have learned a great deal from you. Thank you.

I am working with jquery validation and have come upon a problem that really has me tied up in knots. I have reduced the code down to its' very basics and still cannot resolve the problem. I am trying to validate an input using a required rule and a remote mockjax call. I have been using the "Milk" demo from jquery as a guide. The "Milk" demo works just as it supposed to, however my code does not. Upon entering ANY set of characters in the input box I do not get the input validated either by the required rule or the remote mockjax call. If I place the cursor in the input a second time without changing any of the existing input and press the tab or return key, the value gets validated.

My code is as follows: 

    $(document).ready(function() 
    {
        $.mockjax(
        {
            url: "test.action",
            response: function(settings) 
            {
                this.responseText = "true";
            },
            responseTime: 500
        });
        var validator = $("#myForm").validate(
        {
            rules: 
            {
                FacilityID: 
                {
                    required: true,
                    remote: "test.action"
                }
            },
            messages: 
            {
                FacilityID: 
                {
                    required: "Enter Facility ID",
                    remote: jQuery.format("{0} Facility ID NOT found")
                }
            },
            // specifying a submitHandler prevents the default submit, good for the demo
            submitHandler: function() 
            {
                alert("submitted!");
            },
            // set this class to error-labels to indicate valid fields
            success: function(label) 
            {
                // set   as text for IE
                label.html(" ").addClass("checked");
            },
            highlight: function(element, errorClass) 
            {
                $(element).parent().next().find("." + errorClass).removeClass("checked");
            }
        });
    });

</script>


<section id="main">
    <div id="myFormWrap">
        <h2>Step 2: Enter Facility Data</h2>
        <form id="myForm" autocomplete="off" action="next.php">
            <label for="FacilityID">Facility ID</label>
            <input id="FacilityID" name="FacilityID" type="text" value="" maxlength="12" />
            <label class="status" for="FacilityID"></label>
            <button class="button18" onClick="javascript:StartOver()">Start Over</button>
        </form>
    </div>
</section>

Click here to go to JSFiddle and test the code above.

If I remove the rule for the remote call, the required rule works just fine. I have examined many of the jquery post here and yet have not found an answer. The mockjax is incomplete of course, however I wish to get to the very basic of the requirements and build it up from there. I would appreciate learning what it is I am missing.

Missouri

4

0 回答 0