如果成功或錯誤，則在不同的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">

在它旁邊，您可以添加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 ：
如果需要使用類，則需要修改一些代碼。
您需要形成一個要檢查的元素數組。
遍歷數組。
並使用somethign像：

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 => Message形式的鍵/值對。

例如：

$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對象，並在每個目標之后插入錯誤消息。