1

我目前让我的 jQuery 根据错误或成功将结果输出到相同的 div 中：

HTML

     <div id="error-message").html(res);

查询

     jQuery('#register-me').on('click',function(){
       $("#myform").hide();
       jQuery('#loadingmessage').show(); 
       var action = 'register_action';
       var username = jQuery("#st-username").val();
       var mail_id = jQuery("#st-email").val();
       var firname = jQuery("#st-fname").val();
       var lasname = jQuery("#st-lname").val();
       var passwrd = jQuery("#st-psw").val();
       var ajaxdata = {
          action: 'register_action',
          username: username,
          mail_id: mail_id,
          firname: firname,
          lasname: lasname,
          passwrd: passwrd,
       }
       jQuery.post( ajaxurl, ajaxdata, function(res){
          $('#loadingmessage').hide();
          $("#myform").show();
          jQuery("#error-message").html(res);
       });
     });

PHP

$error = '';
$uname = trim( $_POST['username'] );
$email = trim( $_POST['mail_id'] );
$fname = trim( $_POST['firname'] );
$lname = trim( $_POST['lasname'] );
$pswrd = $_POST['passwrd'];

if( empty( $_POST['username'] ) )
  $error .= '<p class="error">Enter Username</p>';
if( empty( $_POST['mail_id'] ) )
  $error .= '<p class="error">Enter Email Id</p>';
elseif( !filter_var($email, FILTER_VALIDATE_EMAIL) )
  $error .= '<p class="error">Enter Valid Email</p>';

if( empty( $_POST['passwrd'] ) )
  $error .= '<p class="error">Password should not be blank</p>';

if( empty( $_POST['firname'] ) )
  $error .= '<p class="error">Enter First Name</p>';
elseif( !preg_match("/^[a-zA-Z'-]+$/",$fname) )
  $error .= '<p class="error">Enter Valid First Name</p>';

if( empty( $_POST['lasname'] ) )
  $error .= '<p class="error">Enter Last Name</p>';
elseif( !preg_match("/^[a-zA-Z'-]+$/",$lname) )
  $error .= '<p class="error">Enter Valid Last Name</p>';

if( empty( $error ) ){
  $status = wp_create_user( $uname, $pswrd ,$email );

  if( is_wp_error($status) ){
     $msg = '';
     foreach( $status->errors as $key=>$val ){
        foreach( $val as $k=>$v ){
           $msg = '<p class="error">'.$v.'</p>';
        }
     }
     echo $msg;
  } else {
     $msg = '<p class="success">Registration Successful</p>';
     echo $msg;
  }
} else {
   echo $error;
}
  die(1);
}
}

我对如何在 2 个不同的地方获得结果感到困惑。

1：错误=显示错误并显示表单，理想情况下错误应该显示在每个表单字段下方，此时是表单顶部的一个div

2：成功=隐藏表单，只显示成功消息

4

4 回答 4

1

方法 1
如果您希望每个已验证字段都有一条错误消息，则：

您有一个表单输入，例如：

<input name="myfield" id="myfield" type="text">

在它旁边，您可以添加带有警报/错误消息和适当 ID 的 div 或 span，例如：

<input name="myfield" id="myfield" type="text">
<span id="myfield_Error" class="none">Please fill this field</span>

CSS 中的 class="none" 用于隐藏错误容器。就像是：

.none {display:none;}

现在为您的 jquery 部分：

var myfield= $("#myfield").val();
if (myfield=='') { $("#myfield_error").show(); }

这里的技巧是以与您验证的目标表单元素类似的方式命名您的错误容器。因此对于 id="fieldA"，您将遇到错误 id="fieldA_error"。

EDIT1：
如果你需要使用类，你需要修改一点代码。
您需要形成一个要检查的元素数组。
循环遍历数组。
并使用类似的东西：

var fieldName = $(this).attr('name');
var fieldVallue = $(this).val();
if (fieldVallue=='') 
{ 
  $("#"+fieldName+"_error").show(); 
} 
else 
{ 
  $("#"+fieldName+"_error").hide; 
}

方法 2

如果您只想拥有 2 个不同的容器，一个用于成功验证，一个用于错误/失败验证，那么您需要输出与您的 php 文件不同的内容。
因此，您的 php 文件可以输出如下内容：

$report['status'] = 'error'
$report['message'] = 'error in xxxx field - please use a proper email'
echo json_encode($report);

然后在你的 ajax 成功中，你可以检查你得到了什么响应。您解析您的 json 响应并根据您的“状态”，将您的“消息”放在不同的容器中，

我希望这就是您要寻找的。

于 2013-09-19T12:22:09.553 回答
1

或者，您可以按如下方式分配错误处理程序

var jqxhr = jQuery.post(
    ajaxurl,
    ajaxdata,
    function(res){
        $('#loadingmessage').hide();
        $("#myform").show();
        jQuery("#error-message").html(res);
    }
).fail(function() {
    alert("error");
});

如果未通过验证，则从您的 php 代码（使用http_response_code ）发送非 2xx 代码。

于 2013-09-19T12:23:52.377 回答
0

将结果数组编码为 JSON 格式并返回响应。

<?php

if ($validation==false)
{
    $result = array ('response'=>'error','message'=>'Some validation error');  
}
else
{
    $result = array ('response'=>'success','message'=>'Success');  
}

 echo json_encode($result);
?>

<script type="text/javascript">
$.ajax({
    type: "POST",
    url: "process.php",
    data: dataString,
    dataType: "json",
    success: function (data) {
        if (data.response == 'error') {
            alert('error');
        } else if (data.response == 'success') {
            alert('success');
        } else {
            alert('sorry there was an error');
        }
    }

}); 
</script>
于 2013-09-19T12:09:45.243 回答
0

您将（例如）JSON 返回到前端而不是一个字符串会更容易。JSON 将包含 ID => 消息形式的键/值对。

例如：

$errors = array();

if( empty( $_POST['passwrd'] ) ) {
  $errors['st-psw'] = "Password should not be blank";
} 

if( empty( $_POST['firname'] ) ) {
  $errors['st-fname'] = 'Enter First Name';
} elseif( !preg_match("/^[a-zA-Z'-]+$/",$fname) ) {
  $errors['st-fname'] = 'Enter Valid First Name';
}

...
...

if( empty( $errors ) ){
  $response['success'] = true;
} else {
  $response['success'] = false;
  $response['errors'] = $errors;
}

echo json_encode($response);

然后，您将在您的 javascript 中循环 JSON 对象，并在每个目标之后插入错误消息。

于 2013-09-19T12:16:33.233 回答