How to check value in input using javascript in same id and change border style only input that less than 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>