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

时间:2012-11-28 03:56:19

标签: jquery 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!');
            }
        });

    });
});

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

例如,用户标识和名称获取错误,因此当我们单击提交时,表单将不会提交。如果没有显示错误,则可以提交表单。

提前致谢!

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您可以使用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);
 }

查看this

答案 2 :(得分:0)

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

希望这会有所帮助。