PHPの複数のバリデーション

Question

$name、$email、$messageを、実際には間違っているものではなく、エラー（すべて赤色にする）のように見せずに検証しようとしています。

彼女は私が使用しているコードです：

PHP：

<?php 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $phone = $_POST['phone']; 
    $visitors_site = $_POST['site']; 
    $message = $_POST['message']; 

    $email_from = 'mattmowen1@gmail.com'; 
    $email_subject = 'New Contact Submission'; 

    $to = 'matt.owen@example.com'; 
    $headers = "From:" . $email; 
    $headers = "Contact Submission From: " . $email; 
    $message1 = "Name: " . $name; 
    $message2 = "\n\nEmail: " . $email; 
    $message3 = "\n\nPhone: " . $phone; 
    $message4 = "\n\nTheir Site: " . $visitors_site; 
    $message5 = "\n\nMessage: " . $message; 
    $email_body = $message1 . $message2 . $message3 . $message4 . $message5; 

    if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) { 
     mail($to, $email_subject, $email_body,$headers); 
     exit(json_encode(array('error' => 0))); 
    } else { 
     exit(json_encode(array('error' => 1))); 
    } 

    if ($name == "") { 
     exit(json_encode(array('error' => 1))); 
    } else { 
     mail($to, $email_subject, $email_body,$headers); 
     exit(json_encode(array('error' => 0))); 
    } 
?> 

AJAXスクリプト：

var sendEmail = function(){ 
    var url = 'main.php'; 
    $.ajax({ 
     url : url, 
     type : "POST", 
     dataType : "JSON", 
     data : $('#contact-form').serialize(), 
     success : function(response) { 
      if (response.error == 0) { 
       $('#contact-form')[0].reset(); 
       alert('Form submitted successfully. We will contact you asap.'); 
      } else { 
       $('#email-input').css('color', 'red'); 
       alert('ERROR MESSAGE'); 
      } 
     } 
    }) 
    return false; 
} 

HTML：

<div id="contact"> 
     <div class="container"> 
      <form id="contact-form" method="post" onsubmit="return sendEmail()"> 
      <h1>Contact Form</h1> 
      <fieldset> 
       <input placeholder="Your Name" type="text" name="name" id="name-input" required value="<?php echo isset($_POST['name']) ? $_POST['name'] : ''; ?>"> 
      </fieldset> 
      <fieldset> 
       <input placeholder="Your Email Address" type="email" name="email" id="email-input" required value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>"> 
      </fieldset> 
      <fieldset> 
       <input placeholder="Your Phone Number (optional)" type="tel" name="phone" required> 
      </fieldset> 
      <fieldset> 
       <input placeholder="Your Web Site (optional)" type="url" name="site" required> 
      </fieldset> 
      <fieldset> 
       <textarea placeholder="Type your message here...." name="message" required value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>"></textarea> 
      </fieldset> 
      <fieldset> 
       <button type="submit" id="contact-submit" name="submit">Submit</button> 
      </fieldset> 
      </form> 
     </div> 
</div> 

Answer 1

リストだけを送り返します毛布のエラーの代わりに、悪い要素のR声明あなたのJSで次に

<?php 
// ... 
$errors = []; 
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) { 
    $errors[] = "email"; 
} 

if ($name == "") { 
    $errors[] = "name"; 
} 

if ($message == "") { 
    $errors[] = "message"; 
} 

if (count($errors) === 0) { 
    mail($to, $email_subject, $email_body,$headers); 
} 
echo json_encode($errors); 
//... 

：

success : function(response) { 
     if (response.length == 0) { 
      $('#contact-form')[0].reset(); 
      alert('Form submitted successfully. We will contact you asap.'); 
     } else { 
      for (var i = 0; i < response.length; i++) { 
       $('#' + response[i] + '-input').css('color', 'red'); 
       alert('ERROR MESSAGE'); 
      } 
     } 
    } 

マイJavascriptが少し錆びですが、それはトリックを行う必要があります。

<textarea>にはvalue属性がなく、内容は子テキストノードとして追加されます。 XSS problemsを防ぐために、PHPのすべての出力でhtmlspecialchars()も使用する必要があります。あなたのjsの中

Answer 2

：

$erro = 0; 
if(document.getElementById("name-input").value == null or document.getElementById("name-input").value == ""){ 
$erro = 1; 
document.getElementById("name-input").style.borderColor = "red"; 
} 
if(document.getElementById("email-input").value == null or document.getElementById("email-input").value == ""){ 
$erro = 1; 
document.getElementById("email-input").style.borderColor = "red"; 
} 
... 
if($erro == 0){ 
//run ajax 
} 

あなたは隠されたテキストボックスを使用して表示させるためにもう少しhtmlコードを置くことができます。

if(document.getElementById("email-input").value == null or document.getElementById("email-input").value == ""){ 
    $erro = 1; 
    document.getElementById("email-input").style.borderColor = "red"; 
document.getElementById("id_erro1").style.visibility = "visible"; 
    }  

は、あなたのHTMLで作成します。

<fieldset> 
    <input placeholder="Your Email Address" type="email" name="email" id="email-input" required value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>"> 
    <input type="hidden" name="error_mensage1" id="id_erro1" value="Required field" > 
</fieldset> 

使用CSSはスパイスします。