input box value outdated using jquery validate

Question

I'm using jQuery v1.9.1 and jQuery-validate v1.9. I'm trying to take a user given id and validate it using the remote method. I want to check if it is present in a database. I can't get the json I send to the php script to work however, as the value I get using ajax is outdated. The code(I've cut out the php) below builds the string "MailingListID: 1", even if I have entered 12 for the MailingListID's value instead of 1.

JS

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js">    </script>
<script>
$(function() {
    $("#createForm").validate({
        rules:
        {
            WebFormURL:
            {
                required: true,
                url: true
            },
            RedirectURL:
            {
                required: true,
                url: true
            },
            DownloadURL:
            {
                required: false,
                url: true
            },
            EmailNotification:
            {
                email: true
            },
            MailingListID:
            {
                "remote":
                {
                    url: 'checkMailingListID.php',
                    type: "POST",
                    //contentType: "application/json; charset=utf-8",  
                    //dataType:"json",
                    data: "MailingListID=" + $('#mlID').attr('value'),
                    dataFilter: function(data) {
                        var json = JSON.parse(data);
                        if(json === null) {
                            return false;
                        }
                        if(json.mlExists == "false") {
                            return "\"" + json.errorMessage + "\"";
                        } else {
                            return success;
                        }
                    }
                }
            }
        },
        messages:
        {
            MailingListID:
            {
                remote: jQuery.validator.format("No Mailing List with ID {0} exists.")
            }
        },
        submitHandler: function(form)
        {
            form.submit();
        }
    });
});
</script>

HTML

<h1>Web Form Creator</h1><form id="createForm" name="createForm" method="post" action="">
 <table>
 <tr><td colspan="2" align="left"><h2><b>Enter form details</b></h2></td></tr>
 <tr><td><b>Web Form Name: </b></td><td><input type="text" name="WebFormName" id="WebFormName" size="45"/></td></tr>
 <tr><td><b>Web Form URL: </b></td><td><input type="text" value="http://www.SIMUL8.com/" name="WebFormURL" id="WebFormURL" size="45"/></td></tr>
 <tr><td><b>Redirect URL: </b></td><td><input type="text" value="http://www.SIMUL8.com/" name="RedirectURL" id="RedirectURL" size="45"/></td></tr>
 <tr><td><b>Download URL: </b></td><td><input type="text" value="http://www.SIMUL8.com/" name="DownloadURL" id="DownloadURL" size="45"/></td></tr>
 <tr><td><b>Send Notification Email to: </b></td><td><input type="text" name="EmailNotification" id="EmailNotification"  size="45"/></td></tr>

 <tr><td><b>Subscribe to Mailing List: </b></td><td><input type="text" value="1" name="MailingListID" id="mlID" size="45"/></td></tr> 

 <tr><td colspan="2" align="left"><input type="submit" name="submit" id="submit" value="Generate Form" /></td></tr>
 </table>
 </form>

I have also tried removing value completely, then I simply get a blank value:

<tr><td><b>Subscribe to Mailing List: </b></td><td><input type="text" name="MailingListID" id="mlID" size="45"/></td></tr>

I have tried other methods to get the input box value such as $('#mlID').val() and so on to no avail. The ContentType and dataType also make no difference. I assume that the jQuery-validate library is being called before the html form has had a chance to update for some reason. Can anyone give me any hints? I considered trying to use a more up to date version of both jquery libraries but I couldn't find any urls for them.

Answer 1

You misunderstood the documentation. The described "response" is what you'll have coming back from your server-side code. You do not "return" anything within remote.

MailingListID: {
    remote: {
        url: 'checkMailingListID.php',
        type: 'POST',
    }
}

Since your server-side script is PHP, then simply echo a true, false or a JSON formatted string representing your error message.

http://jqueryvalidation.org/remote-method/

"The serverside resource is called via jQuery.ajax (XMLHttpRequest) and gets a key/value pair corresponding to the name of the validated element and its value as a GET parameter. The response is evaluated as JSON and must be true for valid elements, and can be any false, undefined or null for invalid elements, using the default message; or a string, eg. "That name is already taken, try peter123 instead" to display as the error message."

---

Side note: This is exactly the default behavior... so you don't need the submitHandler option at all...

submitHandler: function(form) {
    form.submit();
}