javascript - 如果成功或错误，则在不同的 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: Error = 显示错误并显示表单，理想情况下错误应该显示在每个表单字段下方，目前是表单顶部的div

2: Success = 隐藏表单，只显示成功信息

Answer 1

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

你有一个表单输入，例如:

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

在它旁边，您可以添加一个 div 或 span 以及您的警报/错误消息和适当的 id，例如:

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

编辑1:
如果需要使用类，需要稍微修改一下代码。
你需要组成一个元素数组来检查。
遍历数组。
并使用类似的东西:

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 响应并根据您的“状态”，将您的“消息”放入不同的容器

我希望这就是您要找的。