使用Java腳本和打印進行驗證

我在HTML中有一個表單，並且如果這些字段留空，那麼Javascript將在字段內打印錯誤。請能有人給我一段代碼來驗證表單，然後在表單頂部打印Error，如果它留空並且不在表單的字段內？使用Java腳本和打印進行驗證

我的表格：

<form id="contact" onsubmit="checkContactForm(); return false;" onreset="resetForm();"> 
<p>Fill in the form below to send me a message!</p>  

<div id="errormessage"></div> 

<p> 
<label for=""> </label> 
<input type="text" name="" id="" onfocus="" /> 

<p> 
    <label for="name">Name:</label> 
    <input type="text" name="name" id="name" onfocus="resetField(this);" /> 
</p> 
<p> 
    <label for="email">E-mail address:</label> 
    <input type="text" name="email" id="email" onfocus="resetField(this);" /> 
</p> 
<p> 
    <label for="message">Your Message:</label> 
    <textarea name="message" id="message" rows="5" cols="25" onfocus="resetField(this);"></textarea> 
</p> 
<p> 
    <button type="submit">Send Message</button> 
    <button type="reset">Reset Form</button> 
</p>

我的javascript：

var requiredFields = ["name", "email", "message"]; 

function checkContactForm() { 
    var myForm = document.forms[0]; 
    for (i in requiredFields) { 
     fieldName = requiredFields[i]; 
     if (!myForm[fieldName].value || myForm[fieldName].value == "Error") { 
      myForm[fieldName].style.color = "#f66"; 
      myForm[fieldName].value = ""; 
      var emptyFields = true; 
     } 
    } 

    if (!emptyFields) { myForm.submit(); } 
} 

function resetField(myField) { 
    if (myField.value == "Error") { 
     myField.style.color = "#000"; 
     myField.value = ""; 
    } 
} 

function resetForm(myForm) { 
    var myForm = document.forms[0]; 
    for (i in requiredFields) { 
     fieldName = requiredFields[i]; 
     myForm[fieldName].style.color = "#000"; 
    } 
}

來源

2013-05-21 Antony Cartier Kodinye

使用'爲（VAR我在使用requiredfields）{'讓'i'不會泄漏到全球範圍內 – Ian

由於HTML5有一個表單驗證API（http://www.w3schools.com/js/js_form_validation.asp）

在這裏你可以找到一個漂亮的好的「教程」：http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/

來源

2013-05-21 13:40:14 kaljak

請注意，HTML5表格驗證不會在不識別HTML5的舊版瀏覽器（如IE7和8）中工作。 Mozilla開發者網絡[文檔]（https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation）也比W3Schools好得多。 – ajp15243

如果我明白你想要的錯誤將打印在#errormessage股利，對不對？如果是這樣，你可以簡單地做這樣的事情：

function addError(str){ 
    document.getElementById("errormessage").innnerHTML = document.getElementById("errormessage").innerHTML + str + "<br>"; 
} 

function checkContactForm() { 
    var myForm = document.forms[0]; 
    for (i in requiredFields) { 
     fieldName = requiredFields[i]; 
     if (!myForm[fieldName].value || myForm[fieldName].value == "Error") { 
      myForm[fieldName].style.color = "#f66"; 
      myForm[fieldName].value = ""; 
      var emptyFields = true; 
      addError(fiedlName+" is empty!"); 
     } 
    } 

    if (!emptyFields) { myForm.submit(); } 
}

來源

2013-05-21 14:00:07

使用Java腳本和打印進行驗證

回答

相關問題