Question

大家好，我需要一些帮助。即使验证失败，我的应用程序似乎仍然提供输出。我已经尝试了很多方法来编辑代码但是没有用，表单仍然允许提交并提供输出。

我需要帮助才能使此表单能够在提交时进行验证，如果有一个失败验证或错误，表单不应提交并提供输出。只有提醒。我需要帮助验证。如果验证失败并且表单甚至不应提交输出，则应该只有警报。请帮我解决一下这个。请参阅下面的表格。提前谢谢。

<html>

<head>
<title>Hello and JavaScript</title>
<script>

function doClear()
{
document.PizzaForm.customer.value = "";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value = "PA";
document.PizzaForm.zip.value = "";
document.PizzaForm.phone.value = "";
document.PizzaForm.email.value = "";

document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;

document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return;
}

function doSubmit() 

{
if (validateText() == false)
if (validateRadio() == false)
if (validateTops() == false)
{
return;
}

function capitalizeString(stringToCapitalize) {
    var words = stringToCapitalize.split(' ');
    for (var i=0, il=words.length; i<il; i++) {
        if (words[i].length > 0) {
            words[i] = words[i].charAt(0).toUpperCase()
                       + words[i].substring(1, words[i].length);
        }
    }
    return words.join(' ');
}

var toppings = "";
    for(i=0;i<document.PizzaForm.toppings.length;i++){
        if(document.PizzaForm.toppings[i].checked)
            toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
    }

/*This alerts tells the order form is complete and it will list all the customer information such as Name address etc on a new page.*/
var OrderWindow
OrderWindow = window.open("","","status,height=500,width=500");
OrderWindow.focus();
with (OrderWindow.document)

{
write("<h1><center>Customer Order Summary</center></h1><p>")
write("Name:" + capitalizeString(document.PizzaForm.customer.value) + "<br>")
write("Address:" + document.PizzaForm.address.value + "<br>")
write("City:" + capitalizeString(document.PizzaForm.city.value) + "<br>")
write("State:" + document.PizzaForm.state.value + "<br>")
write("Zip Code:" + document.PizzaForm.zip.value + "<br>")
write("Phone Number:" + document.PizzaForm.phone.value + "<br>")
write("E-Mail:" + document.PizzaForm.email.value + "<br>")
write("Pizza Size:" + document.PizzaForm.sizes.value + "<br>")
write("Toppings:" + toppings + "<br>")
write("<h3><center>Thank You for your Order.</center></h3><p>")
}
return;
}

function validateText()

{
 if (document.PizzaForm.customer.value == "")
 {
   alert("Please enter your name");
   document.PizzaForm.customer.focus();

 }

if (document.PizzaForm.address.value == "")
 {
   alert("Please enter your address.");
   document.PizzaForm.address.focus();

 }

if (document.PizzaForm.city.value == "")
{
   alert("Please enter your City.");

}

if (document.PizzaForm.state.value == "")
{
   alert("Please enter your State.");

 }

if (document.PizzaForm.zip.value == "" ||
   isNaN( document.PizzaForm.zip.value ) ||
   document.PizzaForm.zip.value.length != 5 )
 {
   alert("Please provide a valid Zip code.");
   document.PizzaForm.zip.focus() ;

 }



    if (!/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(document.PizzaForm.phone.value)){
    alert("Please provide a valid phone number.");
    document.PizzaForm.phone.focus();
 }

var email = document.PizzaForm.email.value;
   if(!(/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/.test(email))){
   alert('Please enter a valid e-mail address');
   document.PizzaForm.email.focus() ;
   return false;
    }
    return true;
}


function validateRadio()/*This function validates the radio selection*/
{
    for(i=0;i<document.PizzaForm.sizes.length;i++)
        if(document.PizzaForm.sizes[i].checked)
        return document.PizzaForm.sizes[i].value;
    alert("Please choose the size of your order.");
    return false;
}

function validateTops()/*This function validates the toppings.*/
{
    if (document.PizzaForm.toppings[0].checked == false &&
        document.PizzaForm.toppings[1].checked == false &&
        document.PizzaForm.toppings[2].checked == false &&
        document.PizzaForm.toppings[3].checked == false &&
        document.PizzaForm.toppings[4].checked == false &&
        document.PizzaForm.toppings[5].checked == false &&
        document.PizzaForm.toppings[6].checked == false &&
        document.PizzaForm.toppings[7].checked == false &&
        document.PizzaForm.toppings[8].checked == false)
        {
          alert("Please select a topping of your choice.");
          return false;
        }

       return true;
}


</script>

</head> 

<body bgcolor="#EFEFCF">
 <div align="center">

<pre><h2>Pizza Menu Prices                                            Today's Selection</h2></pre>
<iframe name="left" src="prices.html" width="40%" height="380" scrolling="no" frameborder="0"></iframe>

<iframe name="right" src="images.html" width="35%" height="380" scrolling="no" frameborder="0"></iframe> 

<form Name ="PizzaForm">
<h1>The JavaScript Pizza Parlor</h>
<p>
<h4> Step 1: Enter your Name, Address, City, State, Phone, Zip, and email:</h4>
<font face="Courier New">
Name:  &nbsp;&nbsp;&nbsp;<Input name="customer" size="50" type="text"><br>
Address:&nbsp;<Input name="address" size="50" type="text"><br>
City: &nbsp;&nbsp;&nbsp;<Input name="city" size="16"type="text">
State:<select name="state"  id="selection"> 
      <option value="select state"></option>
      <option>PA</option>
      <option>NJ</option>
      <option>NY</option>
      <option>DE</option>
      </select>
&nbsp;Zip:<Input name="zip" size="8"type="text"><br>
Phone:&nbsp;&nbsp;&nbsp;<Input name="phone" size="50"type="text"><br>
Email:&nbsp;&nbsp;&nbsp;<Input name="email" 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" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4> Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="Plain">Plain
</font>
</p>

<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</div>
</body>
</html>

Answer 1

问题在于这三行：

if (validateText() == false)
if (validateRadio() == false)
if (validateTops() == false)
{
return;
}

意思是：

if (validateText() == false)
  if (validateRadio() == false)
    if (validateTops() == false)
    {
      return;
    }

因此，如果所有这些验证失败，那么您可以提前退出该函数，但即使其中一个验证通过，您的表单也会提交。将其更改为：

if (validateText() == false || validateRadio() == false || validateTops() == false)
{
  return;
}

即使验证失败，表单也会生效

1 个答案: