在提交表单之前验证输入字段
validate input field before submitting form
我想验证表单中的输入字段"putime",因为即使"putime"输入框为空,也会计算结果,并且 nightT附加费也会添加到成本中。所以我想在"putime"为空时验证它,否则脚本是无用的。
function TaxiFare() {
// calculates taxi fare based upon miles travelled
// and the hour of the day in military time (0-23).
var baseFare = 14;
var costPerMile = 7.00;
var nightSurcharge = 20.50; // 9pm to 6am, every night //its flat 20.50 and not per mile
var milesTravelled = Number(document.getElementById("miles").value) || 0;
if ((milesTravelled < 1) || (milesTravelled > 200)) {
alert ("You must enter 1 - 200 miles");
document.getElementById("miles").focus();
return false;
}
var pickupTime = Number(document.getElementById("putime").value) || 0;
if ((pickupTime < 0) || (pickupTime > 23) || (pickupTime==null)) { // note the hours are 0-23. There is no 24 hour, midnight is 0 hours
alert ("The time must be 0-23 hours");
document.getElementById("putime").focus();
return false;
}
var cost = baseFare + (costPerMile * milesTravelled);
// add the nightSurcharge to the cost if it is after
// 8pm or before 6am
if (pickupTime >= 21 || pickupTime < 6) {
cost += nightSurcharge;
}
document.getElementById("result").innerHTML = "Your taxi fare is: $. " + cost.toFixed(2);
}
And here is the Form from HTML
<form>
Miles for Journey <input type="text" id = "miles" required><br>
Pickup Time <input type = text id = "putime" required><br><br>
<input type="button" value="Calculate Fare" onclick="TaxiFare()">
<input type="reset" value="Clear"><br><br>
<span id = "result"></span>
</form>
我已经尝试了很多,但无济于事....欢迎任何帮助。提前感谢!
如何
向表单中添加事件处理程序,例如document.forms[0].submit = validateFunction;
其中验证函数可能如下所示:
function validateFunction()
{
var allIns = this.getElementsByTagName('input');
if(allIns.namedItem('putime').value == '')
{
alert('silly');
return false;
}
//and other checks go here, too
}
相关文章:
- Angular2 Javascript 验证 输入数字而不是字符
- 在 Angular2 中构建多部分/表单数据 POST 请求并验证输入类型文件
- 如何通过 JavaScript 验证输入字段中的值
- jQuery 验证输入文本是否仅接受数字、单词或日期
- 如何javascript验证<输入类型=文件多个>如果浏览器不支持多个
- 用于验证输入的JavaScript正则表达式超过0个字符
- 验证输入字段和块字符
- Angularjs iu.mask带有日期的验证输入
- 验证输入,更新<td>属性以匹配验证状态
- 通过点击表单外的按钮,使用required和angularjs验证输入字段
- 基于自身输入变化的角度验证输入
- 使用 javascript 验证输入数组
- 年龄验证输入框 - 计算是否超过 18 岁
- JQuery 验证输入类型文件在服务器端失败
- 如何使用jquery或javascript验证输入框的内容
- JSF 和 RichFaces 用于实时验证输入框
- Javascript/Jquery:使用数字范围验证输入
- 如何在更改时验证输入字段并启用提交按钮
- 编码器点火器未验证输入文本
- 在复选框选择后验证输入类型文本