如何使用相同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>