Check if username already exists - only working with onclick

Question

I'm trying to check if username and email already exist on a register page.

I've got this javascript code:

var nombre = document.getElementById("username").value;
var email = document.getElementById("email").value;
var errorNombre = document.getElementById("erno");
var errorEmail = document.getElementById("erem");

if (nombre == null || nombre.length == 0 || /^\s+$/.test(nombre)) {
    errorNombre.innerHTML = "<font color='red' face='century gothic'>Debe introducir un nombre de usuario</font>";
    return false;
} else {

    $.ajax({
        type: 'POST',
        data: {
            email: email
        },
        url: 'consulta5.php',
        success: function (response) {
            if (response != 0) {
                errorEmail.innerHTML = "<font color='red' face='century gothic'>Correo ya registrado</font>";
                return false;
            } else if (response == 0) {
                //desde aquí
                errorEmail.innerHTML = "";

                $.ajax({
                    type: 'POST',
                    data: {
                        nombre: nombre
                    },
                    url: 'consulta4.php',
                    success: function (response) {
                        if (response != 0) {
                            errorNombre.innerHTML = "<font color='red' face='century gothic'>Nombre de usuario no disponible</font>";
                            return false;
                        }
                    }
                });
            }
        }
    });
} 

And it works perfectly if it's part of a $( "#enviar" ).live("click", function(){ , but tha problem is that this way the form is not sended if everything's ok. However, if I try to use the on submit = "return validate ()" only the first part of the javascript works, and the form is sended whenever the mail exists or not (but not when there are some blank spaces).

I'd really appreciate some help, because I don't have any idea on how to make this work!!

thanks :)

Answer 1

The form is not submitted because you never tell it to be. If, however, you change your innermost success function to something like:

success: function (response) {
    if (response != 0) {
        errorNombre.innerHTML = "<font color='red' face='century gothic'>Nombre de usuario no disponible</font>";
        return false;
    }
    else {
        $("#yourForm").submit();
    }
}

then I believe your logic will be sound.

That said, there are some other changes I would recommend.

First, consider reworking your validation php to check both fields (name and email) in a single call. You can use a single response value to indicate which (if any) failed. If you want numeric response codes, then you could do something as simple as 0 for all's well, 1 for bad email, 2 for bad name, 3 for errors in both. There's really no need to be making two sequential trips to validate data that has no interdependencies.

Second, consider using CSS! There's no need to be using <font> here. Put a style (if you must) or a class (preferable) on errorNombre and errorEmail . If there are multiple errors that might be shown in those places, then just set the error text dynamically. If these are the only errors that go there, you don't even need that - put the error message in your HTML, and just dynamically show or hide the element.