表單驗證在接近結束時停止工作

我有八個if語句驗證我的表單字段。前六個工作正常，但最後兩個沒有（我已經評論驗證停止工作的地方），因爲它只是重新加載頁面，就像表單被提交一樣。

我需要幫助的兩件事...... 1）爲什麼我的最後兩條if語句不起作用，以及2）有沒有比這更容易，更簡單，更高效，更好的方法來驗證？可以展示給我嗎？

腳本

$("#myform").submit(function(){ 
    // Variables 
    var fname=jQuery('#fname').val(); 
    var emailval=jQuery('#email').val(); 
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
    var vemail=mailformat.test(emailval); 
    var phone = jQuery('#phone').val(); 


    // ALL THREE FIELDS ARE INVALID 
    if ($.trim(fname).length == 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length == 0 || vemail==false)) { 
     // Set the border color to red 
     document.getElementById("fname").style.borderColor = "#E34234"; 
     document.getElementById("email").style.borderColor = "#E34234"; 
     document.getElementById("phone").style.borderColor = "#E34234"; 

     // Define the error text 
     jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>'); 
     jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>'); 
     jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>'); 

     // Display the errors 
     jQuery('.name_error').show(); 
     jQuery('.email_error').show();   
     jQuery('.phone_error').show(); 
     return false; 
    } 
    // Name is valid (PHONE & EMAIL IS INVALID) 
    else if ($.trim(fname).length != 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length == 0 || vemail==false)) { 
     // Ensure the Name Field is styled correctly and the error is hidden 
     document.getElementById("fname").style.borderColor = "#ccc"; 
     jQuery('.name_error').hide(); 

     // Set the border color to red 
     document.getElementById("email").style.borderColor = "#E34234"; 
     document.getElementById("phone").style.borderColor = "#E34234"; 

     // Define the error text 
     jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>'); 
     jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>'); 

     // Display the errors 
     jQuery('.email_error').show();   
     jQuery('.phone_error').show(); 
     return false; 
    } 
    // Phone is valid (NAME & EMAIL IS INVALID) 
    else if ($.trim(fname).length == 0 && $.trim(phone).length > 6 && ($.trim(emailval).length == 0 || vemail==false)) { 
     // Ensure the Phone Field is styled correctly and the error is hidden 
     document.getElementById("phone").style.borderColor = "#ccc"; 
     jQuery('.phone_error').hide(); 

     // Set the border color to red 
     document.getElementById("email").style.borderColor = "#E34234"; 
     document.getElementById("phone").style.borderColor = "#E34234"; 

     // Define the error text 
     jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>'); 
     jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>'); 

     // Display the errors 
     jQuery('.name_error').show();   
     jQuery('.email_error').show(); 
     return false; 
    } 
    // Email is valid (NAME & PHONE IS INVALID) 
    else if ($.trim(fname).length == 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length != 0 && vemail != false)) { 
     // Ensure the Email Field is styled correctly and the error is hidden 
     document.getElementById("email").style.borderColor = "#ccc"; 
     jQuery('.email_error').hide(); 

     // Set the border color to red 
     document.getElementById("fname").style.borderColor = "#E34234"; 
     document.getElementById("phone").style.borderColor = "#E34234"; 

     // Define the error text 
     jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>'); 
     jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>'); 

     // Display the errors 
     jQuery('.name_error').show();   
     jQuery('.phone_error').show(); 
     return false; 
    } 
    // Name is entered and Email is valid (PHONE IS INVALID) 
    else if ($.trim(fname).length != 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length != 0 && vemail != false)) { 
     // Ensure the Name & Email Fields are styled correctly and the errors are hidden 
     document.getElementById("fname").style.borderColor = "#ccc"; 
     document.getElementById("email").style.borderColor = "#ccc"; 
     jQuery('.name_error').hide(); 
     jQuery('.email_error').hide(); 

     // Set the border color to red 
     document.getElementById("phone").style.borderColor = "#E34234"; 

     // Define the error text 
     jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>'); 

     // Display the errors  
     jQuery('.phone_error').show(); 
     return false; 
    } 
    // Phone has more than 6 characters and Email is valid (NAME IS INVALID) 
    else if ($.trim(fname).length == 0 && ($.trim(phone).length != 0 || $.trim(phone).length > 6) && ($.trim(emailval).length != 0 && vemail != false)) { 
     // Ensure the Phone & Email Fields are styled correctly and the errors are hidden 
     document.getElementById("phone").style.borderColor = "#ccc"; 
     document.getElementById("email").style.borderColor = "#ccc"; 
     jQuery('.phone_error').hide(); 
     jQuery('.email_error').hide(); 

     // Set the border color to red 
     document.getElementById("fname").style.borderColor = "#E34234"; 

     // Define the error text 
     jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>'); 

     // Display the errors  
     jQuery('.name_error').show(); 
     return false; 
    } 
    // *** HERE DOWN IS WHERE THINGS NO LONGER WORK AS THEY SHOULD *** 
    // Phone has more than 6 characters and Name is entered (EMAIL IS INVALID) 
    else if (($.trim(fname).length != 0 && $.trim(phone).length > 6) && ($.trim(emailval).length == 0 || vemail==false)) { 
     // Ensure the Name & Phone Fields are styled correctly and the errors are hidden 
     document.getElementById("name").style.borderColor = "#ccc"; 
     document.getElementById("phone").style.borderColor = "#ccc"; 
     jQuery('.name_error').hide(); 
     jQuery('.phone_error').hide(); 

     // Set the border color to red 
     document.getElementById("email").style.borderColor = "#E34234"; 

     // Define the error text 
     jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email Address</span>'); 

     // Display the errors  
     jQuery('.email_error').show(); 
     alert(vemail); 
     return false; 
    } 
    // ALL FIELDS ARE GOOD 
    else if ($.trim(fname).length != 0 && $.trim(phone).length > 6 && ($.trim(emailval).length != 0 && vemail != false)) { 
     // Ensure all fields are styled correctly and errors are hidden 
     document.getElementById("name").style.borderColor = "#ccc"; 
     document.getElementById("phone").style.borderColor = "#ccc"; 
     document.getElementById("email").style.borderColor = "#ccc"; 
     jQuery('.name_error').hide(); 
     jQuery('.phone_error').hide(); 
     jQuery('.email_error').hide(); 

     alert("All is good. We're ready to submit!") 
     return false; 
    } 
    else { 

     // ALERT 
     alert("None of the validation is working"); 
     return false; 
    } 

});

HTML - 只是這涉及到字段集...

<fieldset> 
     <h1 class="fs-title mt16 thick">HEADDER</h1> 

     <input type="text" id="fname" name="fname" placeholder="First Name" /> 
     <div class="name_error"></div> 
     <input type="email" id="email" name="email" placeholder="What is your email address?" /> 
     <div class="email_error"></div> 
     <input type="tel" id="phone" name="phone" placeholder="Phone Number (i.e. 5555551212)" /> 
     <div class="phone_error"></div> 
     <label class="option-button uppercase thick"><input type="radio" name="contact" value="email" />Contact me by email</label> 
     <label class="option-button uppercase thick"><input type="radio" name="contact" value="phone" checked />Contact me by phone</label> 
     <input type="button" name="previous" class="previous action-button" value="Previous" /> 
     <input type="submit" name="submit" class="submit action-button" value="Submit" /> 
    </fieldset>

來源

2016-04-28 thelincster

謝謝@spaceman！這解決了最後兩個驗證無效的問題。 :) – thelincster

@spaceman添加一個答案，所以我可以upvote你。 – thelincster

把它移到了答案上，很高興我能幫上忙。 – spaceman

您的代碼打最後兩個else if但你的下一行代碼爲兩個失敗：

document.getElementById("name").style.borderColor = "#ccc";

因爲標識符不存在，所以應該是fname。控制檯輸出Cannot read property 'style' of null，並且在代碼失敗時，false未返回，因此表單嘗試正常提交，導致頁面重新加載。

您可以使用控制檯（大多數瀏覽器中的F12）來查看這些錯誤。大多數人還會指出發生錯誤的路線，以便進一步評估。當頁面重新加載時，您需要勾選「保留日誌」（在Chrome中表示，在其他瀏覽器中可能會有所不同）以查看它們。

來源

2016-04-28 17:34:28 spaceman

。在你的代碼有很多重複的。確實有更好的方法來做到這一點。

怎麼是這樣的：

var fields = [ { 
    "value": "First name", 
    "type": "text", 
    "validation": "not empty" 
}, { 
    "value": "Email address", 
    "type": "text", 
    "validation": new RegExp(..) 
}, { 
    "value": "Phone number", 
    "type": "text", 
    "validation": "not empty" 
}, { 
    "value": "Contact", 
    "type": "option", 
    "values": [ "Contact me by email", "Contact me by phone" ] 
    "validation": "any" 
} ];

然後在此基礎上規範生成表單和驗證規則。

來源

2016-04-28 17:13:06 Halcyon

哇！

嘿，

您可以使用屬性required和pattern。

<input type="text" id="example" name="example" required pattern="[A-Za-z]{3}"/>

我希望這有助於

里斯

參考文獻：
http://www.w3schools.com/tags/att_input_pattern.asp http://www.w3schools.com/tags/att_input_required.asp

來源

2016-04-28 17:13:14

這肯定會刪除我的許多驗證，但第二個參考說它不適用於IE9或Safari？此外，我將如何腳本在字段下添加錯誤文本？ – thelincster

是的，w3school是正確的，您正在處理什麼Web瀏覽器？自定義錯誤消息：http：// stackoverflow。com/questions/5272433/html5-form-required-attribute-set-custom-validation-message –

謝謝！我有幾種形式可以補充這一點，所以我們將在下一個版本中試用這個版本，如果它運行良好的話，也會將這一版本也移除。欣賞方向！ – thelincster

表單驗證在接近結束時停止工作

回答

相關問題