Iterating through a bean list and validate the data in javascript

Question

My form contains input fields which will be validated against minimum and maximum values while submitting.The input fields will be displayed on the screen using list iteration.

<c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
    <input type="number"name="nameList<c:outvalue='[${status.index}]'/>.initialWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
        <br><br>
    <input type="number" name="nameList<c:out value='[${status.index}]'/>.finalWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
        <br><br>
    <input type="text" class="formtext" name="nameList<c:out value='[${status.index}]'/>.Reason" id ="reason<c:out value='[${status.index}]'/>" value="" maxlength="255" >
        <br><br>
        <input type="submit" value="submit" id="submit" />

 </c:forEach>

So while submitting the form , i have all the user entered values which will be stored in the bean and also the min/ max values.i need to validate the form and prevent the user from submitting the form if any of the entered value is not within the min / max values.

So i am a bit of confused on how to do this in Java script ?

thanks for your suggestions and time ..

JSFIDDLE

Answer 1

I would say give an id

<form id="frmDetails">
    <c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
        <input type="number"name="nameList<c:outvalue='[${status.index}]'/>.initialWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
            <br><br>
        <input type="number" name="nameList<c:out value='[${status.index}]'/>.finalWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
            <br><br>
        <input type="text" class="formtext" name="nameList<c:out value='[${status.index}]'/>.Reason" id ="reason<c:out value='[${status.index}]'/>" value="" maxlength="255" >
            <br><br>
            <input type="submit" value="submit" id="submit" />

     </c:forEach>
</form>

Below will the form submit function

<script type="text/javascript">

$("#frmDetails").on("submit",function(e){
var valid=true;
e.preventDefault();
var inputs=$(this).children('input');
$.each('input',function(index,value){
   if($(this).val()=="")//blank validation
   {
          valid=false;
   }
});
if(valid)
{
//post the form
}

$("#frmDetails").unbind("submit"); //To prevent the form from getting submitted 
});

</script>