Html5聯繫表格 - 問題與JavaScript和PHP驗證

Question

在我開始之前，請除了我的appologises，如果這是很長的時間，我總是新Html5（通常設計在Flash中），只是開始。我最近下載了一個名爲布朗尼的免費模板，並且瞭解大多數情況，但聯繫表單。它使用JavaScript，PHP和Ajax我認爲。我已經在當地工作了，但事情並沒有按照我想要的方式工作。我想要做的是使它與錯誤消息或成功消息e.t.c驗證字段。這是HTML表單代碼，我有：

<p class="required_info"><span>*</span> Required</p> 
<!-- SUCCESS MESSAGE --> 
<div class="success_box none"> Email successfully sent. Thank you! </div> 
<!-- END SUCCESS MESSAGE --> 

<!-- START CONTACT FORM --> 
<form action="#" class="contact_form"> 
    <p> 
    <label for="name">Name <span>*</span></label> 
    <input type="text" class="inputText" id="name" name="name" placeholder="Please enter your full name" pattern="[a-zA-Z ]+" onkeypress="return alpha(event,letters)" required minlength="5" maxlength="50" onpaste="return false;" tabindex="1"/> 
    <div class="success_title none"> You've entered your name. </div> 
    <div class="error_title none">* Please enter your full name. </div> 
    </p> 
    <div class="clear"></div> 
    <p> 
    <label for="company">Company </label> 
    <input type="text" class="inputText" id="company" name="company" placeholder="Company Name" minlength="3" maxlength="50" onpaste="return false;" tabindex="2"/> 
    </p> 
    <div class="clear"></div> 
    <p> 
    <label for="email">E-mail <span>*</span></label> 
    <input type="text" class="inputText" id="email" name="email" placeholder="Please enter a valid email address" required minlength="5" maxlength="50" onpaste="return false;" tabindex="3"/> 
    <div class="error_title none">* Please enter a valid email. </div> 
    </p> 

    <div class="clear"></div> 
    <p> 
    <label for="message">Message <span>*</span></label> 
    <textarea class="inputTextarea" cols="88" rows="6" id="message" name="message" placeholder="Please enter your message" required tabindex="4"></textarea> 
    <div class="error_title none">* Please enter your message. </div> 
    </p> 
    <div class="clear padding20"></div> 
    <p class="submit"><input type="reset" class="resetBtn button white" onclick="resetFields()" value="Reset" /> <a href="javascript:void(0);" class="button white" onclick="$('.contact_form').submit();">Send</a> </p> 
</form> 
<!-- END CONTACT FORM --> 

<!-- ERROR MESSAGE --> 
<div class="error_box none"> Please complete all required fields [ highlighted in red ]. </div> 
<!-- END ERROR MESSAGE --> 

，這是javascript代碼：

$(document).ready(function() { 

    $('#name').focus(function() { 
     $(this).removeClass('error_class'); 
    }); 

    $('#email').focus(function() { 
     $(this).removeClass('error_class'); 
    }); 

    $('#message').focus(function() { 
     $(this).removeClass('error_class'); 
    }); 

    $('.contact_form').submit(function() { 

     hasError = false; 

     if ($('#name').val() == '') { 
      $('#name').addClass('error_class'); 
      hasError = true; 
     } 

     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 

     var emailaddressVal = $('#email').val(); 
     if (emailaddressVal == '') { 
      $('#email').addClass('error_class'); 
      hasError = true; 
     } 
     else if (!emailReg.test(emailaddressVal)) { 
      $('#email').addClass('error_class'); 
      hasError = true; 
     } 

     if ($('#email').val() == '') { 
      $('#email').addClass('error_class'); 
      hasError = true; 
     } 

     if ($('#message').val() == '') { 
      $('#message').addClass('error_class'); 
      hasError = true; 
     } 

     if (hasError == true) { 
      $('.info_box').hide(); 
      $('.error_box').show(); 
      $('.error_title').show(); 
     } 
     else { 
      $.ajax({ 
       type: 'POST', 
       url: 'contact.php', 
       cache: false, 
       data: $(".contact_form").serialize(), 
       success: function (data) { 
        if (data == "error") { 
         $('.success_box').hide(); 
         $('.success_title').hide(); 
         $('.error_box').show(); 
         $('.error_title').show(); 
        } 
        else { 
         $('.error_box').hide(); 
         $('.error_title').hide(); 
         $('.success_box').show(); 
         $('.success_title').hide(); 
         $('.resetBtn').hide(); 
         $('.submit').hide(); 
        } 
       } 
      }); 
     } 

     return false; 
    }); 
}); 

這是PHP代碼：

<?php 

$your_email = 'name@domain.com'; // Your email address 
$subject = 'Email from your contact form'; // Email subject 

$name = isset($_POST['name']) && $_POST['name'] ? $_POST['name'] : ''; // Visitor Name 
$company = isset($_POST['company']) && $_POST['company'] ? $_POST['company'] : ''; // Visitor Company 
$email = isset($_POST['email']) && $_POST['email'] ? $_POST['email'] : ''; // Visitor Email 
$message = isset($_POST['message']) && $_POST['message'] ? $_POST['message'] : ''; // Visitor Message 
$website = isset($_POST['website']) && $_POST['website'] ? $_POST['website'] : ''; // Visitor Message 

$full_message = 'Website: '.$website. "\r\n\r\n Message:".$message; 

if($name && $email && $message) 
{ 
    $headers = 'From: '.$name.' <'.$email.'>' . "\r\n" . 
    'Reply-To: '.$email.'' . "\r\n" . 
    'X-Mailer: PHP/' . phpversion(); 
    $headers .= 'Content-type: text/plain; charset=UTF-8' . "\r\n"; 

    //------------------------------------------------ 
    // Send out email to site admin 
    //------------------------------------------------ 
    if(@mail($your_email, $subject, $full_message, $headers)) 
     die("success"); 
    else 
     die("error"); 
} 
else 
{ 
    die("error"); 
} 

?> 

當發送按鈕被按下，我希望它檢查是否有任何數據已輸入每個輸入字段 - 如果是的話，添加成功消息，如果沒有添加錯誤我ssage。我有錯誤消息工作，但無法獲得單個輸入字段上的成功消息。任何sugestions會有幫助...

Answer 1

我懷疑這是因爲你是分配true或false爲每個變量，而不是在您的PHP腳本中的變量的值。 Isset（$ _ POST [test]）爲真，而不是測試表單值的值。