如何将验证文本函数与其他函数同时使用
How do I use the validate text function simultaneously with other functions?
我试图修改我的validateText函数。现在,如果用户在每个字段中输入信息,他们将看到一个提示,显示他们在表单中输入的信息。我需要添加另一个函数来显示他们留空的每个字段的警报消息。如果他们将名称字段留空,我需要消息"名称数据丢失"作为警报显示。以下是我的文件:
<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: <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:  <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: <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: <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>
你可以像
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) {
return false;
}
//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) {
return false;
}
//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) {
alert('name cannot be blank');
document.PizzaForm.customer.focus();
return false
};
var address = document.PizzaForm.address.value;
if (address.length == 0) {
alert('address cannot be blank');
return false;
}
var city = document.PizzaForm.city.value;
if (city.length == 0) {
alert('name cannot be blank');
return false;
}
var state = document.PizzaForm.state.value;
if (state.length == 0) {
alert('state cannot be blank');
return false;
}
var zip = document.PizzaForm.zip.value;
if (zip.length == 0) {
alert('zip cannot be blank');
return false;
}
var phone = document.PizzaForm.phone.value;
if (phone.length == 0) {
alert('phone cannot be blank');
return false;
}
var email = document.PizzaForm.email.value;
if (email.length == 0) {
alert('email cannot be blank');
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;
alert('need to select a type of piza');
document.PizzaForm.sizes[0].foucs();
return false;
}
<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: <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:  <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: <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: <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="return doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
这将使您开始将错误显示为字段旁边的消息,而不是(非常烦人的)警报。它还展示了如何使您的代码更简洁。
<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>
相关文章:
- Jquery未定义函数正在停止其他操作
- 执行php函数的onclick事件的其他替代方案
- 如何在.js函数中检索来自其他模板的表单的目标值
- 对其他函数使用匿名函数's参数
- 创建要在其他函数中使用的全局变量
- 调试一个简单的jQuery函数;想知道是否与其他代码冲突
- 在Meteor中如何将数据从函数内部复制到其他模板
- 在Jquery调用之间添加其他函数
- 使用一个Javascript函数提交多个表单可以在FF中工作,而不需要其他浏览器
- Mocking console.log()/MOCHA测试框架中的任何其他函数
- 如何从ipify函数返回ip地址,以便在其他函数中使用
- 如果没有其他函数链接到promise,则默认行为
- Javascript创建函数,以便在其他函数之间共享变量
- AngularJS:如何与其他控制器共享作用域函数和变量
- Firefox扩展开发:如何在内容脚本中创建一个全局函数,以便其他加载的脚本文件可以访问它
- 使通过函数加载的JSON可用于其他函数
- 如何使用 javascript 函数取决于是否其他
- 如何在 JavaScript 中访问函数中的其他属性值作为对象属性值
- 有没有办法将其他参数传递给 scrollTarget 回调函数
- 如何在创建的字段上应用 .change 函数 b 其他字段的 .change 函数