JQuery remote validation (doesn't block form submit)

Question

I am facing the following problem. In the signup form it tries to remotly check, if a given username is already used. This works well and if a username is already in use, my adding an error class works fine. The problem is, that you can still submit the register form, even though the username is already in use. Shouldn't the remote validation block it?

Here is my validation code.

var validator = $('#register').validate({
    rules: {
        registerUsername: {

            required: true,
            remote: {
            type: 'post',
            url: 'includes/CheckUsername',
            data: {
                username: function() {
                    return $('#registerUsername').val()
                }
            },
            complete: function(data){
                  if( data.responseText != "found" ) {
                      $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
                      return false;
                  }
                  else{
                      $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
                  }
                }
            }
        },
        registerEmail: {
            required: true
        },
        registerPassword: {
            required: true
        }
    },
    messages: {
        registerUsername: {remote: 'tzuwertzut',required: 'asdasd'},
        registerEmail: "",
        registerPassword: ""
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }

});
$('#myModal').on('hidden.bs.modal', function () {
  validator.resetForm();
  $('#regEmailGroup').removeClass('has-error').removeClass('has-success');
  $('#regUsernameGroup').removeClass('has-error').removeClass('has-success');
  $('#regPassGroup').removeClass('has-error').removeClass('has-success');

});

Any tips would be appreciated.

Answer 1

Referring to the documentation for the remote method:

options:
These options deep-extend the defaults (dataType:"json", data:{nameOfTheElement:valueOfTheElement}). Any options you provide will override the defaults.

and...

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.

(the word "response" above refers to the response from your server-side code)

---

Now let's examine your code:

remote: {
    type: 'post',
    url: 'includes/CheckUsername',
    data: {
        username: function () {
            return $('#registerUsername').val()
        }
    },
    complete: function (data) {
        if (data.responseText != "found") {
            $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
            return false;
        } else {
            $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
        }
    }
}

Regarding your usage of data:

data: {
    username: function () {
        return $('#registerUsername').val()
    }
}

As per the documentation quoted above, the default value of the data option is already nameOfTheElement: valueOfTheElement, so there is no apparent need for you to over-ride it at all here. There is nothing wrong with your syntax, but this option is only needed if you also have to send data from another field along with data from the field targeted by remote; example- you're checking username field with remote but you need to send the email address field along with it.

Regarding your usage of complete:

complete: function (data) {
    if (data.responseText != "found") {
        $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
        return false;
    } else {
        $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
    }
}

There is absolutely no need for you to specify .addClass('has-error').removeClass('has-success') and .removeClass('has-error').addClass('has-success'). When the remote rule recieves pass/fail status, the proper application of classes is going to happen automatically all by itself.

Your logic is trying to determine if the response matches "found". If it does not, you return false. If it does (match "found"), then you want it to pass validation. However, as per the documentation, if a string is returned by the server it's considered to have "failed" validation and the string becomes the error message. I believe that your return false line is doing nothing more than disabling the remote rule entirely, which is why you're able to submit the form.

Basically, there is absolutely no need for you to manually check if the response matches anything. Again, the remote rule is simply looking for your server-side response to be true if validation passes, or false, undefined, null, or a string if validation fails. Everything is then automatically handled by the plugin, including the error classes.

As long as your server-side code is constructed properly to return the required responses, your remote rule only needs to look something like this...

remote: {
    type: 'post',
    url: 'includes/CheckUsername'
}