<html>
<head>
<title>HTML and Java Script</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function validate(){
if( document.PizzaForm.customer.value == "" ) {
alert( "Please provide name" );
document.PizzaForm.customer.focus() ;
return false;
}
if( document.PizzaForm.address.value == "" ) {
alert( "Please provide address" );
document.PizzaForm.address.focus() ;
return false;
}
if( document.PizzaForm.city.value == "" ) {
alert( "Please provide city" );
document.PizzaForm.city.focus() ;
return false;
}
if( document.PizzaForm.state.value == "" ) {
alert( "Please provide state" );
document.PizzaForm.state.focus() ;
return false;
}
if( document.PizzaForm.zip.value == "" ) {
alert( "Please provide zip" );
document.PizzaForm.zip.focus() ;
return false;
}
if( document.PizzaForm.zip.value == "" || isNaN( document.PizzaForm.zip.value ) ||
document.PizzaForm.zip.value.length != 5 ) {
alert( "Please provide a zip in 5 digit number format" );
document.PizzaForm.zip.focus() ;
return false;
}
if( document.PizzaForm.phone.value == "" ) {
alert( "Please provide phone" );
document.PizzaForm.phone.focus() ;
return false;
}
var phone=document.PizzaForm.phone.value;
if (isNaN(phone)){
alert("Enter Numeric value only");
return false;
}
if(phone.length!=10){
alert("Phone number must be 10 numbers long");
return false;
}
//radio button validation
var size = document.PizzaForm.sizes;
for (var i=0; i<size.length; i++) {
if (size[i].checked)
break;
}
if (i===size.length)
return alert("No radio button is checked");
// alert("Radio Button " + (i+1) + " is checked");
//checkbox validation
var toppings = document.PizzaForm.toppings;
for (var i=0; i<toppings.length; i++) {
if (toppings[i].checked)
break;
}
if (i==toppings.length)
return alert("No Checkbox is checked");
// alert("check box " + (i+1) + " is checked.");
}
</script>
</head>
<body>
<form name="PizzaForm">
<h1>The Java Script Pizza Parlor</h1>
<p>
<h4>Step 1: Enter Your name,address,and phone number:</h4>
<font face="Courier New">
Name: <input name="customer" size="50" type="text"><br>
Address: <input name="address" size="50" type="text"><br>
City: <input name="city" size="15" type="text">
State: <input name="state" size="2" type="text">
Zip: <input name="zip" size="5" type="text"><br>
Phone: <input name="phone" size="50" type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio">Small
<input name="sizes" type="radio">Medium
<input name="sizes" type="radio">Large<br>
</font>
</p>
<p>
<h4>Step 3: Select the Pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox">Pepperoni
<input name="toppings" type="checkbox">Canadian Bacon
<input name="toppings" type="checkbox">Sausage<br>
<input name="toppings" type="checkbox">Mushrooms
<input name="toppings" type="checkbox">Pineapple
<input name="toppings" type="checkbox">Black Olives<br>
</font>
</p>
<input type="button" value="Submit Order" onclick="return validate()">
<input type="button" value="Clear Entries" >
</form>
</body>
</html>