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);
}
}

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

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

如果您只想拥有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代码（使用http_response_code）发送非2xx代码。

Answer 3

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

Answer 4

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

例如：

$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对象，并在每个目标之后插入错误消息。

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

4 个答案: