配列オブジェクトをループしてウェブサイトに表示するにはどうすればよいですか？

Question

フォームの検証にjQuery/Ajaxを使用しています。フォームの検証中は、エラーは正常に表示されますが、Webサイトには表示されません。私はコンソールログだけでそれを見ることができます。私はそれが私のjsコードのためだと知っています。どうすれば私のウェブサイトに表示できますか？応答]タブで

Ajaxの戻り値のデータ：

{"error":true, 
"0":"Your name should be 2-20 characters long", 
"1":"Your email address required", 
"2":"Your message subject required", 
"3":"Your message required", 
"4":"Invalid captcha"} 

私が使用していますJSコード以下：

$("#contactForm").submit(function(e) { 
    e.preventDefault(); 
    formData = $(this).serialize(); 
    $.ajax({ 
     url : 'form-validation.php',   
     type : 'POST', 
     dataType : 'json', 
     data : formData, 
     beforeSend : function() { 
      $("#form-submit").text('Validation...'); 
      $("#form-submit").prop('disabled', true); 
     }, 
     success : function (result) { 
      $("#form-submit").text('Send Message'); 
      $("#form-submit").prop('disabled', false); 

      var len = 0 
      for (var x in result) {  
           alert(len);   
       $("#formResult").html('<div class="alert alert-danger">'+result[x]+'</div>'); 
       len++; 

      } 
      // for (x in result) {      
      // $("#formResult").html('<div class="alert alert-danger">'+result[x]+'</div>'); 
      // if(result['error'] == false) { 
      //  $("#formResult").html('<div class="alert alert-danger">Your message has been sent. I will contact with you asap.</div>'); 
      //  $('#contactForm')[0].reset(); 
      //  setTimeout(function() { 
      //   window.location.href = 'http://site/contact.php'; 
      //  }, 5000); 
      // } 
      // } 

     } 
    }); 
}); 

PHPコード：

<?php 

$formName  = htmlspecialchars($_POST['form-name']); 
$formEmail  = htmlspecialchars($_POST['form-email']); 
$formSubject = htmlspecialchars($_POST['form-subject']); 
$formMessage = htmlspecialchars($_POST['form-message']); 
$googleCaptcha = htmlspecialchars($_POST['g-recaptcha-response']); 
$secret   = 'secret'; 
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$googleCaptcha); 
$responseData = json_decode($verifyResponse); 

$data   = array(); 
$data['error'] = false; 

if(isset($formName, $formEmail, $formSubject, $formMessage, $googleCaptcha)) { 
    if(empty($formName) && empty($formEmail) && empty($formSubject) && empty($formMessage) && empty($googleCaptcha)) { 
     $data[]  = 'All fields are required';   
     $data['error']  = true; 
    } else { 
     if(empty($formName)) { 
      $data[]  = 'Your name required'; 
      $data['error']   = true; 
     } elseif(strlen($formName) < 2 || strlen($formName) > 20) { 
      $data[]  = 'Your name should be 2-20 characters long'; 
      $data['error']   = true; 
     } elseif(is_numeric($formName)) { 
      $data[]  = 'Your name must be alphabic characters'; 
      $data['error']   = true; 
     } 

     if(empty($formEmail)) { 
      $data[]  = 'Your email address required'; 
      $data['error']   = true; 
     } elseif(!filter_var($formEmail, FILTER_VALIDATE_EMAIL)) { 
      $data[]  = 'Your email is incorrect'; 
      $data['error']   = true; 
     } 

     if(empty($formSubject)) { 
      $data[]  = 'Your message subject required'; 
      $data['error'] = true; 
     } elseif(strlen($formSubject) < 2 || strlen($formSubject) > 500) { 
      $data[]  = 'Your message subject should be 2-500 characters long'; 
      $data['error']  = true; 
     } elseif(is_numeric($formSubject)) { 
      $data[]  = 'Your message subject must be alphabic characters'; 
      $data['error']  = true; 
     } 

     if(empty($formMessage)) { 
      $data[]  = 'Your message required'; 
      $data['error']  = true; 
     } elseif(strlen($formMessage) < 2 || strlen($formMessage) > 1500) { 
      $data[]  = 'Your message should be 2-1500 characters long'; 
      $data['error']  = true; 
     } elseif(is_numeric($formMessage)) { 
      $data[]  = 'Your message must be alphabic characters'; 
      $data['error']  = true; 
     } 

     if(empty($googleCaptcha)) { 
      $data[]  = 'Invalid captcha'; 
      $data['error']  = true; 
     } elseif(!$responseData->success) { 
      $data[]  = 'Captcha verfication failed'; 
      $data['error']  = true; 
     } 
    } 

    if($data['error'] === false) { 

     $to = "creativeartbd@gmail.com"; 
     $subject = "Contac Form- Creativeartbd.com"; 

     $message = "<b>$formMessage</b>";  

     $header = "From:creativeartbd.com \r\n";   
     $header .= "MIME-Version: 1.0\r\n"; 
     $header .= "Content-type: text/html\r\n"; 

     $retval = mail ($to,$subject,$message,$header); 
     if($retval) { 
      $data[] = 'Your message has been sent. I will contact with you asap.'; 
      $data['error']  = false; 
     } else { 
      $data[] = "Your message didn't sent"; 
      $data['error']  = true; 
     }  
    } 
} 

echo json_encode($data); 

更新：

$("#form-submit").prop('disabled', false); 
      for (x in result) {     
       $("#formResult").html("<div class='alert alert-danger'>"+result[x]+"</div>"); 
       if(result['error'] == false) { 
        $("#formResult").html('<div class="alert alert-danger">Your message has been sent. I will contact with you asap.</div>'); 
        $('#contactForm')[0].reset(); 
        setTimeout(function() { 
         window.location.href = 'http://www.creativeartbd.com/portfoli/contact.php'; 
        }, 5000); 
       } 
      } 

Answer 1

あなたはこの$data[]を使用しているどこでもこの

$data['messages'][] = 'Your message required';

を好きに自分の$data配列を更新します。だから、適切なJSON形式に

あなたのJSON形式を与えることは、あなたがエラーメッセージを印刷するこの

{ 
    "messages": [ 
    "Your name should be 2-20 characters long", 
    "Your email address required", 
    "Your message subject required", 
    "Your message required", 
    "Invalid captcha" 
    ], 
    "error": true 
} 

使用、次のように行わなければならない間違っています。この質問の@shabbirで

$("#formResult").html(""); 
for (var x in result.messages) { 
    $("#formResult").append('<div class="alert alert-danger">' + result.messages[x] + '</div>'); 
} 

Answer 2

、あなたは一つのことを行うことができ、

は、PHPのあなたの$data配列の適切なキーを追加します。

JSコードでキャッチします。それに応じて、ページにエラーを表示することができます。 ここに簡単な考えがあります。

$data['message'] = "First name is required"; 
$data['error'] = true; 

だからJSコードに、このようなAJAXのご success一部を更新：

success : function (result) { 
    if(result.error != true) 
    { 
     // catch some element of the page to show your error using jquery something like: 
     $('.error').text(result.message); 
    } 
    else 
    { 
     // Here your existing code will go... 
    } 
}