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聲明

<?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); 
//... 

然後在您的JS：

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屬性，內容作爲子文本節點添加。您還應該使用PHP的所有輸出中的htmlspecialchars()來防止XSS problems。

Answer 2

在您的JS：

$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來調劑。