フォームを送信する前に入力フィールドを検証する

Question

'putime'入力ボックスが空であっても結果が計算され、nightSargeがコストに追加されるため、入力フィールド '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

方法validateFunctionは次のようになります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 
}