如何使用相同ID的javascript检查输入中的值并更改边框样式（仅输入小于1.5的输入）？

Question

How to check value in input using javascript in same id and change border style only input that less than 1.5 ?

When user fill value into input type text and press submit button, I want to use javascript to check value in input If less than 1.5. It's will be alert and change border style on that input.

<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 {...}

also, like stated above, you cannot let more than one element get the same id.

Answer 2

Try this, may be you want like this, its not good practice to use same 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>