輸入號碼旁邊的錯誤消息不是文字

我需要一些幫助：我需要驗證用戶輸入的是fuelcost輸入中的數字而不是文本。還要在輸入欄旁邊以小的紅色斜體字體顯示錯誤消息，並將焦點更改爲該欄位（修復後清除錯誤消息）我不知道如何從這裏繼續：輸入號碼旁邊的錯誤消息不是文字

<body> 
<select id="destList"> 
    <option id="28">Falmouth to Nantucket</option> 
    <option id="11">Falmouth to Edgartown</option> 
    <option id="7.6">Falmouth to Oak bluffs</option> 
    <option id="38">Falmouth to Newport</option> 
</select> 
<p/> 
<select id="speedList"> 
    <option id="18" value="14">14 kt</option> 
    <option id="24" value="18">18 kt</option> 
    <option id="30" value="20">20 kt</option> 
    <option id="37" value="22">22 kt</option> 
</select> 
<p/> 
<input type="text" id="fuelCost" value="4.25" /> 
<p/> 
<button onClick="calcCharterCost()">Calculate</button> 
</body> 

<script> 
function calcCharterCost() 
{ 
    var destList = document.getElementById("destList"); 
    var distance = destList.options[destList.selectedIndex].id; 


    var speedList = document.getElementById("speedList"); 
    var gph = speedList.options[speedList.selectedIndex].id; 
    var speed = speedList.value; 

    var fuelCost = document.getElementById("fuelCost").value; 
    if (fuelCost == "") 

    var time; 
    time = (distance/speed); 

    var cost; 
    cost = time * gph * fuelCost; 
    alert("cost = " + cost.toFixed(2)); 
} 
</script>

幫助

來源

2016-08-16 VonTilly

我刪除了您的「java」問題標記，因爲您的問題似乎與此語言無關。如果我錯過了某些內容並做錯了，請告訴我。 –

_「我需要驗證用戶輸入的是一個數字而不是輸入的文本」_'.'字符不是數字 – guest271314

isFinite(variable)

這方便的小功能檢查，如果一個變量是一個數字（小數或整數）。你可以檢查在if語句，如果isFinite(fuelCost)，計算成本，否則。，給用戶一些他們沒有的錯誤信息不輸入數字。

來源

2016-08-16 00:59:37

您可以將您的元素封裝在表單中，並將輸入字段的類型設置爲「數字」。瀏覽器會爲你處理錯誤信息。

<input type="number" id="fuelCost" value="4.25"/>

請參閱此琴：https://jsfiddle.net/ca3apsho/

來源

2016-08-16 01:05:58 derp

您可以在<input>元素使用pattern屬性與RegExp\d+\.\d+|\d+匹配隨後由數字字符.後跟數字或數字字符;毗鄰<input>元素<label>元素，css:invalid，:after，content

:invalid + [for="fuelCost"]:after { 
 
    content:"input requires number"; 
 
    color:red; 
 
}

<input type="text" id="fuelCost" value="4.25" pattern="\d+\.\d+|\d+"/> 
 
<label for="fuelCost"></label>

來源

2016-08-16 01:25:08 guest271314

我在這裏做了很多的變化。首先，當你從DOM（id，value's等）拉動數字時，它們將是字符串。所以當你試圖用數學來進行數學運算時，它就不會起作用。最好將這些值轉換爲您正在查找的類型。在這種情況下，它是數字。另一件事是選項和輸入有價值屬性。所以最好使用它們。

我改變了HTML看起來像這樣。

<body> 
<select id="destList"> 
    <option id="28" value="28">Falmouth to Nantucket</option> 
    <option id="11" value="11">Falmouth to Edgartown</option> 
    <option id="76" value="7.6">Falmouth to Oak bluffs</option> 
    <option id="38" value="38">Falmouth to Newport</option> 
</select> 
<p/> 
<select id="speedList"> 
    <option id="18" value="14">14 kt</option> 
    <option id="24" value="18">18 kt</option> 
    <option id="30" value="20">20 kt</option> 
    <option id="37" value="22">22 kt</option> 
</select> 
<p/> 
<input type="text" id="fuelCost" value="" /> 
<p/> 
<button onClick="calcCharterCost()">Calculate</button> 
</body>

和JS看起來像這樣。

function calcCharterCost() 
{ 
    var time, 
     cost, 
     errorElem = document.createElement("span"), //create a span for the error message. 
     destList = document.getElementById("destList"), //grab the destList ID DOM element. 
     speedList = document.getElementById("speedList"), //grab the speedList ID DOM element. 
     fuelCost = document.getElementById("fuelCost"), //grab the fuelCost ID DOM element. 
     distance = destList.options[destList.selectedIndex].value, //get destList option value. 
     gph = speedList.options[speedList.selectedIndex].value, //get speedList option value. 
     fuelVal = fuelCost.value, //get the input value. 
     distanceNum = Number(distance), // convert the distance variable to a number. 
     fuelNum = Number(fuelVal), // convert the fuelVal variable to a number. 
     speed = Number(gph), // convert the gph variable to a number. 
     parentElem = fuelCost.parentNode; // get the parent node of the input element. 

     errorElem.textContent = "Fuel value needs a number value."; // create an error messaeg. 


    time = (distanceNum/speed); 

    cost = time * speed * fuelNum; 

    //ternary operation checks to see if the input is blank and a number type. if it is not append error element. 
    fuelVal === "" || typeof fuelVal !== "number" ? parentElem.appendChild(errorElem) : alert("cost = " + cost.toFixed(2)); 
}

來源

2016-08-16 03:07:21

輸入號碼旁邊的錯誤消息不是文字

回答

相關問題