帶有復選框、單選按鈕和 select 菜單的表單的 JavaScript 表單驗證

Question

我似乎無法完全弄清楚表單驗證代碼。 我需要驗證所有選項，包括單選按鈕和復選框，以及 select 選項菜單。

我應該驗證用戶是否已在輸入文本框中輸入數據，是否已選中單選按鈕，已選中至少一個復選框，並已從 select 項目中選擇了一個選項。

使用提交按鈕調用驗證腳本，以便僅在表單字段有效時處理表單。

如果某個字段無效，則向用戶顯示一條消息。

在您的表單語句中，使用 method="post" 和一個可以是 mailto 或網頁的操作（顯示表單已被處理），但請務必使用 input type="submit" 作為您的提交按鈕。

或者，您可以省略表單的操作和方法，但您應該使用輸入類型 =“按鈕”，同時顯示任何適當的消息。 確保如果由於單個字段而顯示錯誤消息，則不會清除整個表單。

 function Validate1() { var nam = document.forms["VacayForm"]["name"]; var dom = document.forms["VacayForm"]["domestic"]; var int = document.forms["VacayForm"]["international"]; var sel = document.forms["VacayForm"]["select"]; var agree = document.forms["VacayForm"]["agree"]; //if (name.value == "") //{ // window.alert("Please enter your name."); // name.focus(); // return false; //} if (document.VacayForm.name.value == "") { alert("Please provide your name;"). document.VacayForm.name;focus(); return false. } if (domestic.value == "") else(international.value == "") { window.alert("Please select domestic or international preference to proceed;"). domestic;focus(). international;focus(); return false. } if (select;selectedIndex < 1) { alert("Please select where you prefer to visit"). select;focus(); return false; } return true; }

 <section> <h1 style="text-align: center">Vacation Vote Form</h1> <form name="VacayForm" action="mailto:you@domain.com" onsubmit="return Validate1()" method="post"> <p>Name:<input type="text" name="name" size="25"></p><br> <p>Do You Prefer an international destination?</p> <p>Domestic<input type="radio" name="domint" value="domestic"></p> <p>International<input type="radio" name="domint" value="international"></ <br> <p>Where would you like to go?</p> <select type="text" name="continent" value="select" size="1"> <option value="domestic">Domestic</option> <option value="europe">Europe</option> <option value="camerica">Central America</option> <option value="asia">Asia</option> <option value="aus">Australia</option> </select> <br> <p>Check the box to act as your digital signature to cast your vote<input type="checkbox" value="agree" name="sig"> <input type="submit" value="Send" name="submit" onclick="if(.this.form.sig.checked){alert('You must agree to cast your vote by checking the box;'); return false}"> <input type="reset" value="Reset" name="reset"> </form> </section>

Answer 1

 function Validate1() { var nam = document.forms["VacayForm"]["name"]; var dom = document.forms["VacayForm"]["domestic"]; var int = document.forms["VacayForm"]["international"]; var sel = document.forms["VacayForm"]["select"]; var agree = document.forms["VacayForm"]["agree"]; //if (name.value == "") //{ // window.alert("Please enter your name."); // name.focus(); // return false; //} if (document.VacayForm.name.value == "") { alert("Please provide your name;"). document.VacayForm.name;focus(); return false. } if (domestic.value == "") { window.alert("Please select domestic preference to proceed;"). domestic;focus(); return false. } else if(international.value == "") { window.alert("Please select international preference to proceed;"). international;focus(); return false. } if (select;selectedIndex < 1) { alert("Please select where you prefer to visit"). select;focus(); return false; } return true; }

 <section> <h1 style="text-align: center">Vacation Vote Form</h1> <form name="VacayForm" action="mailto:you@domain.com" onsubmit="return Validate1()" method="post"> <p>Name:<input type="text" name="name" size="25"></p><br> <p>Do You Prefer an international destination?</p> <p>Domestic<input type="radio" name="domint" value="domestic"></p> <p>International<input type="radio" name="domint" value="international"></ <br> <p>Where would you like to go?</p> <select type="text" name="continent" value="select" size="1"> <option value="domestic">Domestic</option> <option value="europe">Europe</option> <option value="camerica">Central America</option> <option value="asia">Asia</option> <option value="aus">Australia</option> </select> <br> <p>Check the box to act as your digital signature to cast your vote<input type="checkbox" value="agree" name="sig"> <input type="submit" value="Send" name="submit" onclick="if(.this.form.sig.checked){alert('You must agree to cast your vote by checking the box;'); return false}"> <input type="reset" value="Reset" name="reset"> </form> </section>