在提交表单之前检查ajax中的错误

$(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?

大家好,我有这个代码使用jQuery来验证用户ID。将会有更多验证,例如密码,名称等。但我很困惑。现在我能够告诉用户插入的用户标识包含错误。在发布表单时,我该如何检查错误?

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.

例如,userid和name会出错,所以当我们点击提交时,表单将不会提交。如果没有显示错误,则可以提交表单。

Thanks in advance!

提前致谢!

3 个解决方案

#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>

#2

You can check values using Regex as follow

您可以使用Regex检查值,如下所示

SCRIPT

var ck_name = 'YourDesiredRegExForValidation';//set your desired Regex to validate your `name`

function validate(form){
   var name = form.name.value;
   //set your all field's value in a variable
   var errors = [];

 if (!ck_name.test(name)) {
  errors[errors.length] = "You valid Name .";
 }
 //simultaneously check out all fields

 if (errors.length > 0) {
      reportErrors(errors);
      return false;
 }
  return true;
}

// Following function is just to display Errors
function reportErrors(errors){
      var msg = "Please Enter Valide Data...\n";
      for (var i = 0; i<errors.length; i++) {
              var numError = i + 1;
              msg += "\n" + numError + ". " + errors[i];
      }
      alert(msg);
 }

Check out this

看看这个

#3

   In a nutshell, if the data does not pass validation, let the function return false; returning false will prevent the form from posting the data to the server; if the data does pass validation, let the function return true.
   I can explain further, but basically, that's what needs to happen.

   Hope this helps.

简而言之,如果数据未通过验证,则让函数返回false; return false将阻止表单将数据发布到服务器;如果数据确实通过验证,则让函数返回true。我可以进一步解释,但基本上,这就是需要发生的事情。希望这可以帮助。