使用innerHTML文本的Javascript表单验证不会消失
Javascript form validation using innerHTML text won't disappear
在我的html表单上，当一个字段留空并且执行Javascript时，使用innerHTML显示错误消息。但是，在允许的输入用于该字段之后，如果另一个字段为空，则消息不会消失。如果刷新页面，字段中的所有信息都会保留，但innerHTML消息会消失。是否有一种方法，使错误信息消失后，点击计算按钮和Javascript执行?比如重新检查一下，然后把信息带走。
下面是我的html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>The Happy Hoppin' Hotel</title>
<link type="text/css" rel="stylesheet" href="happyhoppin_skeleton.css" />
<script src="happyhoppin_skeleton.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<form>
<h1>The Happy Hoppin' Hotel Checkout Page</h1>
<p>Fill out the form below to calculate balance due</p>
Guest ID Number: <input type="text" id="custID" /><div id="guestID"> </div>
Room Type:
<select id="roomType" />
<option></option>
<option>Double</option>
<option>Single</option>
<option>Parlor</option>
</select><div id="room"> </div>
Length of Stay: <input type="text" id="stayLength" name="" /><div id="stay"> </div>
Number of Drinks: <input type="text" id="drinkNum" name="" /><div id="drink"> </div>
Number of Towels: <input type="text" id="towelNum" name="" /><div id="towel"> </div>
Number of Flushes: <input type="text" id="flushNum" name="" /><div id="flush"> </div>
Bug Complaints?: <label><br>
<input type="radio" id="radio" name="bugComplaint" value="Yes" onclick="getCheckedRadio(this)" />Yes<br>
<input type="radio" id="radio" name="bugComplaint" value="No" onclick="getCheckedRadio(this)" />No
<div id="comments">Customer Comments:
<textarea name="customerComment" id="comments" onFocus="this.value=''" value="Make me disappear" cols="50" rows="5">Enter your comments here...</textarea>
</div>
<input type="button" onclick="calculateFinalBill()" value="Calculate">
</form>
</body>
</html>
这是我的Javascript代码:
const doublePrice = 150;
const singlePrice = 100;
const parlorPrice = 80;
const drinkPrice = 5;
const towelPrice = 3;
const flushPrice = 1;
var custID;
var roomPrice;
var stayLength;
var drinkNum;
var towelNum;
var flushNum;
var totalDue;
var subtotal;
var roomType;
var bugDiscount;
function calculateFinalBill() {
validateForm();
if(roomType == "Double"){
roomPrice = doublePrice;
}
if(roomType == "Single"){
roomPrice = singlePrice;
}
if(roomType == "Parlor"){
roomPrice = parlorPrice;
}
roomTotal = roomPrice * stayLength
towelTotal = towelPrice * towelNum
flushTotal = flushPrice * flushNum
drinkTotal = drinkPrice * drinkNum
subtotal = roomTotal + towelTotal + flushTotal + drinkTotal
totalDue = subtotal - bugDiscount
displayBill();
}
function getCheckedRadio(which){
var bugValue = which.value;
if (bugValue == "No"){
bugDiscount = 0;
}
if (bugValue == "Yes"){
bugDiscount = 20;
}
}
function validateForm(){
custID = parseInt(document.getElementById("custID").value);
if(isNaN(custID)){
document.getElementById('guestID').innerHTML="*Guest ID must be a number"
throw "stop execution";
}
if(custID <= 0){
document.getElementById('guestID').innerHTML="*Guest ID must be greater than zero"
throw "stop execution";
}
roomType = document.getElementById("roomType").value;
if(roomType == ""){
document.getElementById('room').innerHTML="*Room type must be selected"
throw "stop execution";
}
stayLength = parseInt(document.getElementById("stayLength").value);
if(isNaN(stayLength)){
document.getElementById('stay').innerHTML="*Length of Stay must be a number"
throw "stop execution";
}
if(stayLength < 0){
document.getElementById('stay').innerHTML="*Length of Stay must be greater than zero"
throw "stop execution";
}
drinkNum = parseInt(document.getElementById("drinkNum").value);
if(isNaN(drinkNum)){
document.getElementById('drink').innerHTML="*Number of Drinks must be a number"
throw "stop execution";
}
if(drinkNum < 0 || drinkNum > 25){
document.getElementById('drink').innerHTML="*Number of Drinks must be 0-25"
throw "stop execution";
}
towelNum = parseInt(document.getElementById("towelNum").value);
if(isNaN(towelNum)){
document.getElementById('towel').innerHTML="*Number of Towels must be a number"
throw "stop execution";
}
if(towelNum < 0){
document.getElementById('towel').innerHTML="*Number of Towels must be zero or greater"
throw "stop execution";
}
flushNum = parseInt(document.getElementById("flushNum").value);
if(isNaN(flushNum)){
document.getElementById('flush').innerHTML="*Number of Flushes must be a number"
throw "stop execution";
}
if(flushNum < 0){
document.getElementById('flush').innerHTML="*Number of Flushes must be zero or greater"
throw "stop execution";
}
customerComment = document.getElementById("customerComment");
}
function displayBill(){
var newPage = "<html><head><title>Billing Summary</title></head>"; //Add CSS after title
newPage += "<body><h1>Happy Hoppin Hotel</h1>";
newPage += "<h2>Guest Billing Summary</h2>";
newPage += "Guest Identification: " + custID;
newPage += "<br />";
newPage += "Room Type: " + roomType;
newPage += "<br />";
newPage += "Length of Stay: " + stayLength;
newPage += "<br />";
newPage += "Room Charge: $" + roomTotal;
newPage += "<br />";
newPage += "Drink Charge: $" + drinkTotal;
newPage += "<br />";
newPage += "Towel Charge: $" + towelTotal;
newPage += "<br />";
newPage += "Flushing Charge: $" + flushTotal;
newPage += "<br />";
newPage += "Subtotal: $" + subtotal;
newPage += "<br />";
if(bugDiscount != 0)
{
newPage += "Discount: $" + bugDiscount;
newPage += "<br />";
}
newPage += "Total Due: $" + totalDue;
newPage += "<br />";
newPage += "Come back and visit us again at the Happy Hoppin' Hotel"
var j = window.open('','','width=400,height=500');
j.document.write(newPage);
j.document.close();
}
这可能有助于作为一个视觉http://jsbin.com/ifuxiv/1/edit如果你点击计算，在客户ID中输入一个值，然后再次点击计算，你会看到"客户ID必须是一个数字"的消息没有消失。
如果我的问题令人困惑或需要补充信息，请在拒绝我的问题之前询问。谢谢。
这可以简单地通过在验证开始时重置错误消息来解决:
document.getElementById('guestID').innerHTML='';
document.getElementById('room').innerHTML='';
document.getElementById('stay').innerHTML='';
document.getElementById('drink').innerHTML='';
/// and so on.
然而，最好以一种更DRY的方式来处理这个问题(不要重复自己)，或者为设置每个错误消息创建通用方法，或者至少为每个错误输出元素(即var gID = document.getElementById('guestID');)存储var引用，这意味着您可以轻松地在需要的地方编写gID.innerHTML，并节省重新搜索DOM的时间。
相关文章：
- 正在验证8个真/假复选框或复选框中的2个
- 借助asp.net验证或java脚本对多个文本进行验证
- jQuery自定义验证比较多个输入的序列
- 使用html中的外部javascript进行数据验证
- 如何使用jquery Validation验证Formspread
- jquery中的文本框验证
- 在验证和发送邮件后更改联系人表单的 html
- 代码不会验证
- facebook”;添加评论“;popup获胜'不要消失
- JS验证ajax返回的html中的表单数据
- 同步调用，直到用户通过angular验证为访问者
- 带有加号的电话号码验证(可选）
- 解析javascript表单验证器
- 两位数的月份日期验证
- 使用angularjs验证文本框中的电子邮件
- 同一页面上的多个验证码在提交失败时消失
- javascript form validaton， 验证消息 快速消失.
- Javascript单选按钮验证错误弹出不到一秒钟，但不应消失
- 如果我使用类型 = 按钮，HTML 5 验证就会消失
- 使用innerHTML文本的Javascript表单验证不会消失
