Javascript 如何与其他函数同时使用验证文本函数？_Javascript

Javascript 如何与其他函数同时使用验证文本函数？

javascript

Javascript 如何与其他函数同时使用验证文本函数？,javascript,Javascript,我正在尝试修改validateText函数。现在，如果用户在每个字段中输入信息，他们将看到一个警报，显示他们在表单中输入的信息。我需要添加另一个功能，以显示他们保留空白的每个字段的警报消息。如果他们将name字段留空，我需要消息“name data is missing”显示为警报。以下是我所拥有的： <html> <head> <title>HTML and JavaScript</title> <script> /*nff Ad

我正在尝试修改validateText函数。现在，如果用户在每个字段中输入信息，他们将看到一个警报，显示他们在表单中输入的信息。我需要添加另一个功能，以显示他们保留空白的每个字段的警报消息。如果他们将name字段留空，我需要消息“name data is missing”显示为警报。以下是我所拥有的：

<html>

<head>
<title>HTML and JavaScript</title>
<script>
/*nff Add the doClear function to clear the information entered by the user and enter the information to be cleared when the clear entries button is clicked at the bottom of the Web Page.*/

function doClear()
{
  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()

/*nff Add an if statement to the doSubmit function to show an alert message if there is missing information once the user clicks the submit order button at the bottom of the Web Page.*/

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

//nff Add another if statment to the doSubmit function so that an alert is shown if no radio button has been selected for the size of the pizza.

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

//nff Add an alert box to show customer information from text fields when the Submit Order button is clicked.

  var customer = document.PizzaForm.customer.value;
  var address = document.PizzaForm.address.value;
  var city = document.PizzaForm.city.value;
  var state = document.PizzaForm.state.value;
  var zip = document.PizzaForm.zip.value;
  var phone = document.PizzaForm.phone.value;
  var email = document.PizzaForm.email.value;
  alert ("Name: " + customer +'\n' +
         "Address: " + address +'\n' +
         "City: " + city +'\n' +
         "State: " + state +'\n' +
         "Zip: " + zip +'\n' +
         "Phone: " + phone +'\n' +
         "Email: " + email);

}
//nff Add the validateText function to ensure that all fields are complete before the order is submitted.

function validateText()
{
  var customer = document.PizzaForm.customer.value;
  if (customer.length == 0) return false;
  var address = document.PizzaForm.address.value;
  if (address.length ==0) return false;
  var city = document.PizzaForm.city.value;
  if (city.length == 0) return false;
  var state = document.PizzaForm.state.value;
  if (state.length == 0) return false;
  var zip = document.PizzaForm.zip.value;
  if (zip.length == 0) return false;
  var phone = document.PizzaForm.phone.value;
  if (phone.length == 0) return false;
  var email = document.PizzaForm.email.value;
  if (email.length == 0) return false;
  return true;
  }

//nff Add the validateRadio function so that if none of the radio buttons for size are selected it will alert the user as shown above.

function validateRadio()
{
  if (document.PizzaForm.sizes[0].checked) return true;
  if (document.PizzaForm.sizes[1].checked) return true;
  if (document.PizzaForm.sizes[2].checked) return true;
  if (document.PizzaForm.sizes[3].checked) return true;
  return false;
  }
</script>
</head>

<body>
  <form name="PizzaForm">

<!--nff add title to the Web Page-->

  <h1>The JavaScript Pizza Parlor</h1>

<!--nff add directions to the user for the information to be entered-->

  <p>
  <h4>Step 1: Enter your name, address, and phone number:</h4>

<!--nff change the font-->

  <font face="Courier New">

<!--nff insert a text field for user to enter their name, add spaces between the title of the text box and the box itself, specify the size of the input box, and the type of input into the box as text.-->
    Name: &nbsp;&nbsp;&nbsp;<input name="customer" size="50"
    type="text"><br>

<!--nff insert a text field for user to enter their address, specify the size of the input box, and the type of input into the box as text.-->
    Address: <input name="address" size="50" type="text"><br>

<!--nff Insert a text field for user to enter their city, add spaces between the title of the text box and the box itself, specify the size of the input box, and the type of input into the box as text.-->
    City: &nbsp;&nbsp;&nbsp<input name="city" size="15" type="text">

<!--nff Insert text fields for the user to enter their state and zip, specify the sizes of the input boxes, and specify that the text to be entered into the boxes will be in all caps for the state box. These input boxes should be on the same line as the last one.-->
    State: <input name="state" size="2" type="TEXT">
    Zip: <input name="zip" size="5" type="text"><br>

<!--nff Insert a text field for the user to enter their phone number, insert spaces after the title of the box, specify the size of the box, and the type of input as text.-->
    Phone: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>

<!--nff Insert a text field for the user to enter their email address, insert spaces after the title of the box, specify the size of the box, and the type of input as text.-->
    Email: &nbsp;&nbsp;<input name="email" size="50" type="text"><br>
  </font>
 </p>

 <!--nff add second step to order a pizza-->
 <p>
   <h4>Step 2: Select the size of pizza you want:</h4>
   <font face="Courier New">

<!--nff Add radio buttons to choose from three options for pizza sizes.-->
     <input name="sizes" type="radio">Small
     <input name="sizes" type="radio">Medium
     <input name="sizes" type="radio">Large
     <input name="sizes" type="radio">Jumbo<br>
   </font>
 </p>
 <p>
   <h4>Step 3: Select the pizza toppings you want:</h4>
   <font face="Courier New">

<!--nff Add check boxes for user to choose toppings.-->
     <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>
     <input name="toppings" type="checkbox">Green Peppers
     <input name="toppings" type="checkbox">Extra Cheese
     <input name="toppings" type="checkbox">None<br>
    </font>
   </p>

 <!--nff Add buttons for the options to submit order or clear entries. Add an onClick event to show the alert entered at the beginning of this document when the submit button is clicked at the bottom of the Web Page. Add and onClick event to clear the entries in this form upon clicking the clear entries button.-->
   <input type="button" value="Submit Order" onClick="doSubmit()">
   <input type="button" value="Clear Entries" onClick="doClear()">
  </form>
</body>

</html>


HTML和JavaScript
/*nff添加doClear功能，以清除用户输入的信息，并在单击网页底部的“清除条目”按钮时输入要清除的信息*/
函数doClear（）
{
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.size[0]。选中=false；
document.PizzaForm.size[1]。选中=false；
document.PizzaForm.size[2]。选中=false；
document.PizzaForm.size[3]。选中=false；
document.PizzaForm.toppings[0]。选中=false；
document.PizzaForm.toppings[1]。选中=false；
document.PizzaForm.toppings[2]。选中=false；
document.PizzaForm.toppings[3]。选中=false；
document.PizzaForm.toppings[4]。选中=false；
document.PizzaForm.toppings[5]。选中=false；
document.PizzaForm.toppings[6]。选中=false；
document.PizzaForm.toppings[7]。选中=false；
document.PizzaForm.toppings[8]。选中=false；
返回；
}
函数doSubmit（）
/*nff向doSubmit函数添加一条if语句，以便在用户单击网页底部的submit order按钮后，如果缺少信息，则显示一条警告消息*/
{
如果（validateText（）==false）
{
警报（“步骤1中缺少所需数据”）；
返回；
}
//nff向doSubmit函数添加另一个if station，以便在没有为比萨饼大小选择单选按钮时显示警报。
if（validateRadio（）==false）
{
警报（“步骤2中缺少所需数据”）；
返回；
}
//nff添加一个警报框，在单击提交订单按钮时显示文本字段中的客户信息。
var customer=document.PizzaForm.customer.value；
var address=document.PizzaForm.address.value；
var city=document.PizzaForm.city.value；
var state=document.PizzaForm.state.value；
var zip=document.PizzaForm.zip.value；
var phone=document.PizzaForm.phone.value；
var email=document.PizzaForm.email.value；
警报（“名称：“+customer+”\n”+
“地址：“+地址+”\n”+
“城市：“+City+”\n”+
状态：“+状态+”\n+
“Zip:“+Zip+”\n”+
电话：“+Phone+”\n+
“电子邮件：”+电子邮件）；
}
//nff添加validateText函数，以确保提交订单之前所有字段都已完成。
函数validateText（）
{
var customer=document.PizzaForm.customer.value；
如果（customer.length==0）返回false；
var address=document.PizzaForm.address.value；
if（address.length==0）返回false；
var city=document.PizzaForm.city.value；
如果（city.length==0）返回false；
var state=document.PizzaForm.state.value；
if（state.length==0）返回false；
var zip=document.PizzaForm.zip.value；
如果（zip.length==0）返回false；
var phone=document.PizzaForm.phone.value；
如果（phone.length==0）返回false；
var email=document.PizzaForm.email.value；
如果（email.length==0）返回false；
返回true；
}
//nff添加validateRadio功能，这样，如果没有选择大小的单选按钮，它将如上所示提醒用户。
函数validateRadio（）
{
if（document.PizzaForm.size[0]。选中）返回true；
if（document.PizzaForm.size[1]。选中）返回true；
if（document.PizzaForm.size[2]。选中）返回true；
if（document.PizzaForm.size[3]。选中）返回true；
返回false；
}
比萨饼店

步骤1：输入您的姓名、地址和电话号码：
名称：

地址：

城市：
声明：
邮政编码：

电话：

电子邮件：



第2步：选择您想要的比萨饼尺寸：
小的
中等
大的
巨无霸



步骤3：选择您想要的比萨配料：
意大利 辣味 香肠
加拿大熏肉
香肠

蘑菇
菠萝
黑橄榄

青椒
额外的奶酪
无

您可以发出如下警告

函数doClear（）{
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.size[0]。选中=false；
document.PizzaForm.size[1]。选中=false；
document.PizzaForm.size[2]。选中=false；
document.PizzaForm.size[3]。选中=false；
document.PizzaForm.toppings[0]。选中=false；
document.PizzaForm.toppings[1]。选中=false；
document.PizzaForm.toppings[2]。选中=false；
document.PizzaForm.toppings[3]。选中=false；
document.PizzaForm.toppings[4]。选中=false；
document.PizzaForm.toppings[5]。选中=false；
document.PizzaForm.toppings[6]。选中=false；
document.PizzaForm.toppings[7]。选中=false；
document.PizzaForm.toppings[8]。选中=false；
返回；
}
函数doSubmit（）
/*nff向doSubmit函数添加一条if语句，以便在用户单击网页底部的submit order按钮后，如果缺少信息，则显示一条警告消息*/
{
如果（validateText（）==false）{
返回false；
}
//nff向doSubmit函数添加另一个if station，以便在没有为pizz大小选择单选按钮时显示警报
<style type="text/css">
table {
  border-collapse: collapse;
  font-family: courier new, mon-space;
}
td {
  padding: 2px 2px 0 0;
}
input {
  margin-left: 15px;
}
.errorMessage {
  color: #999999;
}
</style>
<script>
function doSubmit() {

  if (!validateText()) {
    alert("Required data missing in Step 1");
    return;
  }

  if (validateRadio() == false) {
    alert("Required data missing in Step 2");
    return;
  }
  /* snipped - display field values */
}

// Check fields aren't empty
function validateText() {
  return 'customer address city state zip phone email'.split(' ').every(function(name) {
           // Get the element, remove error message if there is one
           var el = document.PizzaForm[name];
           removeError(el);

           // If fails validation, write error and return false
           if (el.value == '') {
             showError(el, 'Please enter a value');
             return false;
           }
           return true;
         });
}

// Check at least one radio is checked
function validateRadio() {
  for (var cbs = document.PizzaForm.sizes, i=0, iLen=cbs.length; i<iLen; i++) {
    if (cbs[i].checked) return true;
  }
  return false
}

function showError(el, text) {
  var err = document.createElement('span');
  err.className = 'errorMessage';
  err.appendChild(document.createTextNode(text));
  el.parentNode.appendChild(err);
}

function removeError(el) {
  var err = el.parentNode.querySelector('.errorMessage');
  err && err.parentNode.removeChild(err);
}

</script>

  <form name="PizzaForm">
  <h1>The JavaScript Pizza Parlor</h1>
  <h4>Step 1: Enter your deatils:</h4>
  <table>
    <tr><td>Name:<td colspan="3"><input name="customer" size="50" type="text">
    <tr><td>Address:<td colspan="3"><input name="address" size="50" type="text">
    <tr><td>City:<td><input name="city" size="15" type="text">
        <td>State:<input name="state" size="2" type="TEXT">
        <td>Zip:<input name="zip" size="5" type="text">
    <tr><td>Phone:<td colspan="3"><input name="phone" size="50" type="text">
    <tr><td>Email:<td colspan="3"><input name="email" size="50" type="text">
  </table>
  <h4>Step 2: Select your pizza size:</h4>
  <p>
     <input name="sizes" type="radio">Small
     <input name="sizes" type="radio">Medium
     <input name="sizes" type="radio">Large
     <input name="sizes" type="radio">Jumbo
   </font>
  </p>
   <h4>Step 3: Select some toppings:</h4>
   <table>
     <tr>
       <td><input name="toppings" type="checkbox">Pepperoni
       <td><input name="toppings" type="checkbox">Canadian Bacon
       <td><input name="toppings" type="checkbox">Sausage
     <tr>
       <td><input name="toppings" type="checkbox">Mushrooms
       <td><input name="toppings" type="checkbox">Pineapple
       <td><input name="toppings" type="checkbox">Black Olives
     <tr>
       <td><input name="toppings" type="checkbox">Green Peppers
       <td><input name="toppings" type="checkbox">Extra Cheese
       <td><input name="toppings" type="checkbox">None<br>
   </table>
  <input type="button" value="Submit Order" onClick="doSubmit()">
  <input type="reset" value="Clear Entries">
</form>