如何使用相同ID的javascript檢查輸入中的值並更改邊框樣式（僅輸入小於1.5的輸入）？

Question

如何使用相同ID的javascript檢查輸入中的值並僅更改輸入小於1.5的邊框樣式？

當用戶在輸入類型的文本中填寫值並按提交按鈕時，我想使用javascript檢查輸入中的值是否小於1.5。 這將是警報並更改該輸入的邊框樣式。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>                
<form onsubmit="return checkform(this);">
<span id="num_top"></span>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type="submit" name="submit" value="OK">
</form>

<script language="JavaScript" type="text/javascript">
function checkform ( form )
{
  if ((form.num.value != "") && (form.num.value < "1.5")) {
    alert( "MINIMUM NUM IS 1.5" );
    document.getElementById("num_top").scrollIntoView()
    document.getElementById("num").style.border = "1px solid red";
    return false ;
  }
  else {
    document.getElementById("num").style.border = "1px solid #d5d5c5";
  }
return true ;
}
</script>

Answer 1

var input = document.getElementById("num");
if(input.value > 1.5) {...} else {...}

同樣，如上所述，您不能讓一個以上的元素獲得相同的ID。

Answer 2

試試這個，可能是您想要這樣，使用相同的id並不是一個好習慣。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form onsubmit="return checkform(this);">
<span id="num_top"></span>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>
<div>
    <p>
        <label>
            <input type="text" id="num" size="20" name="num[]">
        </label>
    </p>
</div>

<br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type="submit" name="submit" value="OK">
</form>

<script language="JavaScript" type="text/javascript">
function checkform ( form )
{
    var TextFields = $( ":input[type=text]" );
    var itemValue  = '';
    var returnForm = true;
    $.each(TextFields,function(key,val){
        itemValue = $(val).val();
        if ((itemValue != "") && (itemValue < 1.5)) {
            alert("MINIMUM NUM IS 1.5");
            $("html, body").animate({ scrollTop: 0 }, "slow");
            $(this).css('border', '1px solid red');
            returnForm =  false;
        }
        else if (itemValue == "") {
            alert("Value empty");
            returnForm =  false;
        }
        else {
            $(this).css('border', '1px solid #d5d5c5');
        }
    });
    return returnForm;

}
</script>