Question

$(document).ready(function(){
    $("#userid").blur(function(){
        $.post("validation.php?input=userid",{ userid:$("#userid").val() } ,function(data){
            if(data == "blank"){
                $("#useridError").removeClass().addClass('messageError').html('Please do not leave blank!');
            }
        });

    });
});

Hello guys, I have this codes that use jQuery to validate the userid. There will be some more validation for example password, name, etc. But I am so confused. Now I am able to tell the user that the inserted userid contains error. When it comes to posting the form, how could I check the errors?

for example, the userid and name get errors, so when we click submit, the form will not submit. If there is no error displayed, then the form can be submitted.

Thanks in advance!

Answer 1

<script type="text/javascript">
/*$(document).ready(function(){
    $("#userid").blur(function(){
        $.post("validation.php?input=userid",{ userid:$("#userid").val() } ,function(data){
            if(data == "blank"){
                $("#useridError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });

    });
     $("#useremail").blur(function(){
        $.post("validation.php?input=useremail",{ useremail:$("#useremail").val() } ,function(data){
            if(data == "blank"){
                $("#useremailError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });

    });
     $("#username").blur(function(){
        $.post("validation.php?input=username",{ username:$("#username").val() } ,function(data){
            if(data == "blank"){
                $("#useremailError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });

    });
});*/

function validate_userid(){
    $.post("validation.php?input=userid",{ userid:$("#userid").val() } ,function(data){
            if(data == "blank"){
                $("#useridError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });
}
function validate_useremail(){
    $.post("validation.php?input=useremail",{ useremail:$("#useremail").val() } ,function(data){
            if(data == "blank"){
                $("#useremailError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });
}

function validate_username(){
    $.post("validation.php?input=username",{ username:$("#username").val() } ,function(data){
            if(data == "blank"){
                $("#useremailError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });
}
function validate(){
var userid = $("#userid").val();
var useremail = $("#useremail").val();
var username = $("#username").val();
if(userid == ""){
    validate_userid();
}else if(useremail == ""){
    validate_useremail();
}else if(username == ""){
    validate_username();
}
}

/*You can use any one of the validate()--------------the two are working as same-------------------*/
function validate(){
    var userid = $("#userid").val();
    var useremail = $("#useremail").val();
    var username = $("#username").val();
    if(userid == ""){
        $.post("validation.php?input=userid",{ userid:$("#userid").val() } ,function(data){
            if(data == "blank"){
                $("#useridError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });
    }else if(useremail == ""){
        $.post("validation.php?input=useremail",{ useremail:$("#useremail").val() } ,function(data){
            if(data == "blank"){
                $("#useremailError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });
    }else if(username == ""){
        $.post("validation.php?input=username",{ username:$("#username").val() } ,function(data){
            if(data == "blank"){
                $("#useremailError").removeClass().addClass('messageError').html('Please do not leave blank!');
                return false;
            }
        });
    }
}

</script>
<form action="" method="post">
<input type="text" name="userid" id="userid" value="" onblur="return validate_userid();" />
<div id="useridError"></div>

<input type="text" name="useremail" id="useremail" value="" onblur="return validate_useremail();" />
<div id="useremailError"></div>

<input type="text" name="username" id="username" value="" onblur="return validate_username();" />
<div id="usernameError"></div>

   <input type="submit" value="SUBMIT" name="submit" id="submit" onclick="return validate();" />
</form>