带有警报和输出的表单验证，显示所有选中的项目答案

【问题标题】：Form validation with alerts and out that displays all checked items带有警报和输出的表单验证，显示所有选中的项目
【发布时间】：2015-05-28 00:10:55
【问题描述】：

我终于能够验证我的单选按钮和复选框。但是，我还有一些小问题。

问题 1：

当我在填写完所有必需信息后提交表单时，表单会输出所有选择的信息，但我注意到当我选择多个复选框时，它只在输出摘要中显示一个。有关如何让其他选中的复选框项目出现的任何提示，例如如果我选中 2 个项目，我应该在输出摘要页面中看到两个选中的项目

问题 2：表单验证

对于每个未选中的文本字段、单选框和复选框，这意味着如果我要填写除一个文本之外的所有文本并提交表单而不选择单选框和复选框，我应该会收到一条警报，说明缺什么。但是，警报会在电子邮件之后的第 1 步之后结束。如果没有选中单选框和复选框，它甚至不会发出警报，除非我再次点击提交以验证表单。

如何强制从第 1 步到第 3 步检查验证？

我主要关心的是能够验证复选框并能够选择多个并将我的选择显示在输出中。

<html>

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

function doClear()/*This function clears the order form once it has been completed*/
{
document.PizzaForm.customer.value = "";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value = "";
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() /*This function submits the order form once it has been completed*/

{
if (validateText()==false)
   {
   alert("Required data missing in Step 1");
   }

if (validateRadio()==false)
   {
   alert("Required data missing in Step 2");
   }

if(validateTops()==false)
   {
   alert("Required data missing in Step 3");
   return;
   }

/*This alerts tells the order form is complete and it will list all the customer information such as Name address etc.*/
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:" + document.PizzaForm.customer.value + "<br>")
write("Address:" + document.PizzaForm.address.value + "<br>")
write("City:" + 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:" + validateRadio() + "<br>")
write("Pizza Toppings:" + validateTops() + "<br>")
write("<h3><center>Thank You for your Order.</center></h3><p>")
}
return;
}

function validateText()/*This function validate all the text field in step 1.*/

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

 }

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

 }

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

}

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

 }

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

 }

if (!/^\d{3}-\d{3}-\d{4}$/.test(document.PizzaForm.phone.value)) {
    alert("Please provide a correct phone number.");
    document.PizzaForm.phone.focus();
 }

var emailID = document.PizzaForm.email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
 {
   alert("Please enter correct Email.")
   document.myForm.Email.focus() ;

 }
 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 a pizza size.");
    return false;
}

function validateTops()/*This function validates the checkbox selection*/
{
    for(i=0;i<document.PizzaForm.toppings.length;i++)
        if(document.PizzaForm.toppings[i].checked==true) 
        return document.PizzaForm.toppings[i].value;
    alert("Please pick a topping of your choice.");
    return false;
}



</s cript>

</ head> 
<body>
<form Name ="PizzaForm">
<h1> The JavaScrpt Pizza Parlor</h>
<p>
<h4> Step 1: Enter your name, address, phone number, 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="15"type="text">
State:<Input name="state" size="2"type="text"><br>
Zip:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Input name="zip" size="5"type="text"><br>
Phone: &nbsp;&nbsp;<Input name="phone" size="50"type="text"><br>
Email: &nbsp;&nbsp;<Input name="email" size="31"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>
<!--
========================================================
The submit and clear form  buttons belows.
========================================================
-->
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</ form>
</ body>
</ html>

【问题讨论】：

html-form-guide.com/php-form/php-form-checkbox.html
我猜你有很多事情要做。你确定你不能使用 jQuery 吗？它肯定会简化你的一些代码（imao）。关于多项选择，您希望它如何显示？它可以是逗号分隔的列表吗？（例如'Pepperoni', 'Black Olives', 'Extra Cheese'）

标签： javascript forms validation

【解决方案1】：

好的，我会尝试解决我从你的描述中得到的：

问题 #1：当您在函数中声明 return 时，您结束了它的执行。所以，在你的validateTops() 上，当你找到第一个浇头时，你几乎就结束了它。这是另一种方法：

function validateTops()/*This function validates the checkbox selection*/
{
    var toppings = []; //<== empty array
    for(i=0;i<document.PizzaForm.toppings.length;i++)
        if(document.PizzaForm.toppings[i].checked==true) 
            toppings.push(document.PizzaForm.toppings[i].value); //<== including on the array

    if (toppings.length == 0) { //<== testing if array is empty, meaning 'no tops'
        alert("Please pick a topping of your choice."); 
        return false;
    } else { return toppings; }
}

我不太了解您的其他问题，但我认为这与提醒您验证期间缺少的步骤有关，对吧？所以这里有别的东西：

var stepsMissing = []; //<== new empty array
if (validateText()==false) {
    stepsMissing.push('Step 1');
}
if (validateRadio()==false) {
    stepsMissing.push('Step 2');
}
if(!(validateTops())) { //<==same as "validateTops() == false", just so you know...
    stepsMissing.push('Step 3');
}
if (stepsMissing.length > 0) {
    alert('Requiring data missing in '+stepsMissing); //<== this is turning your validation message into one message. For keeping it separated in 3 alerts, you can use a for loop iterating through stepsMissing
}

另一件事：您调用一次验证函数来进行验证，然后再次调用它来填写您的“订单”。您不应该只调用一次并将返回值存储在本地变量中，这样您就可以对其进行测试，然后在最终订单中使用它们？我知道这些函数太简单了，但你就是不要浪费执行同样的事情。

顺便说一句：如果你可以使用 jQuery，你可以用更少的代码来实现它，并且以一种更易读的方式（imao）。

【讨论】：