如果成功或错误，则在不同的 div 中获取 ajax 结果

Question

我目前让我的 jQuery 根据错误或成功在同一个 div 中输出结果：

HTML

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

JQUERY

     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：成功=隐藏表单，只显示成功消息

Answer 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 个不同的容器，一个用于成功验证，一个用于错误/失败验证，那么您需要输出与您的 php 文件不同的内容。
因此，您的 php 文件可以输出如下内容：

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

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

我希望这就是你想要的。

Answer 2

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

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

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

Answer 3

您将（例如）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 对象，并在每个目标之后插入错误消息。

Answer 4

将结果数组编码为 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>