jQuery id selector and validate.js

Question

So I was looking at some code I wrote a few days ago, it works perfectly, and I have absolutely no idea how. I was hoping one of you could help me out.

In my validation code, I am performing some ajax requests. This is done using the "remote" tag. These requests send the username and emails that were entered in a form to the server.

 $("#signup-form").validate({
    rules: {
        username: {
            required: true,
            remote: {
                url: "/CheckDuplicateUsername/",
                type: "get",
                data: { 
                    username: $("#username").val()
                }
            }
        },

        email: {
            required: true,
            remote: {
                url: "/CheckDuplicateEmail/",
                type: "get",
                data: { 
                    email : $("#email").val()
                }
            }
        },
//More code

Note that I send the values inside the email and username fields to the server. I get these values using an ID. I think I am getting this data from the form's tags. Now let me show you my HTML. Notice that the ID in my username and password tags is different than the ID used in my jQuery code above.

<div class="fieldWrapper">

              <label for="id_username">Username: </label>
              <input id="id_username" type="text" placeholder="First Name" name="username" maxlength="30" class="valid">
           </div>

<div class="fieldWrapper">

                <label for="id_email">Email</label>
                <input id="id_email" type="text" placeholder="Email" name="email" maxlength="75">
           </div>

My two input tags have the ids "id_username" and "id_email", respectively. But the validation code selects the tag with the ids "username" and "email". Note that my validation code is sending the right data to the server. If I try to change the validation code to select the value inside the tags associated with the "id_username" and "id_email," null strings are sent to the server. How can this be!?

Thank you!

Answer 1

When you have

rules: {
        username: {
...

That means validate field that has name attribute equal username . When you specify remote option you can use data for sending data for additional field. Like in this example from plugins docs:

"Makes the email field required, an email and does a remote request to check if the given address is already taken. In addition, the http method is set to "post" and the username is sent along side the email address."

$("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $("#username").val();
          }
        }
      }
    }
  }
});