javascript - 在提交表单之前验证输入字段

Question

我想验证表单中的输入字段“putime”，因为即使“putime”输入框为空，也会计算结果并将 nightSurcharges 添加到成本中。所以我想在'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>

我已经尝试了很多但都无济于事....欢迎任何帮助。提前致谢!

Answer 1

如何向表单添加事件处理程序，例如 document.forms[0].submit = validateFunction;

其中 validateFunction 可能如下所示:

function validateFunction()
{
    var allIns = this.getElementsByTagName('input');
    if(allIns.namedItem('putime').value == '')
    {
        alert('silly');
        return false;
    }
    //and other checks go here, too
}