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:[email protected]" 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>
