带有复选框、单选按钮和 select 菜单的表单的 JavaScript 表单验证

Question

I cannot seem to figure out the form validation code completely. I need validation for all options, including the radio buttons and the checkboxes, along with the select option menu.

I am supposed to validate whether the user has entered data in the input text box, has checked a radio button, has checked at least one checkbox, and has selected an option from the select items.

Use a submit button to invoke the validation script, so that the form is processed only when the form fields are valid.

If a field is invalid then display a message to the user.

In your form statement, use method="post" and an action that can be a mailto or a webpage(displaying that the form has been processed), but be sure to use input type="submit" for your submit button.

Alternatively you can leave out the form's action and method, but then you should use an input type="button", along with displaying any appropriate messages. Make sure that if you display an error message because of a single field, you do not clear out the whole entire form.

 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>