Jquery validation - field focus

Question

I have a form with list of input fields to be filled in.The values entered will be validated against the min and max criteria.If the entered value doesn't fall into the criteria , users need to be triggered to enter the reason followed by entering the after weight.

<c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
    <input type="number"  class="required"  name="nameList<c:out value='[${status.index}]'/>.initialWeight" onchange="checkOnChange(this,'<c:out value="${Item.personId}"/>','<c:out value="${Item.minWeight}"/>','<c:out value="${Item.maxWeight}"/>')">
    <input type="number"  class="required"  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}"/>')">
    <input type="text" class="formtext" name="nameList<c:out value='[${status.index}]'/>.Reason" value="" maxlength="255" size="25">
 </c:forEach>

So once the initalWeight is entered , onchange event will be triggered to check whether the value is with in the min and max value.If it doesn't fall in to the criteria ,users will be alerted to enter reason and the screen focus should be on the reason field.

function checkOnChange(name, id, min, max)
{

    var check = true;
    var originalValue = '';
    var minimum = eval(min);
    var maximum = eval(max);
    var nameVal = eval(name.value);
    if (nameVal > maxVal) 
    {
         alert(id + ' Enter the reason before proceeding');
         return false;
    }
    if (itemVal < minVal) 
    {
          alert(id + ' Enter the reason before proceeding');
          return false;
    }

}

JSFiddle link : http://jsfiddle.net/jegadeesb/ehehjxbp/

Is there a better way to achieve this .Kindly share your suggestions.

Thanks for your valuable suggestions and time

Answer 1

Add the reason field an ID and the set focus on it using the focus method

<c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
    <input type="number"  class="required"  name="nameList<c:out value='[${status.index}]'/>.initialWeight" onchange="checkOnChange(this,'<c:out value="${Item.personId}"/>','<c:out value="${Item.minWeight}"/>','<c:out value="${Item.maxWeight}"/>')">
    <input type="number"  class="required"  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}"/>')">
    <input type="text" class="formtext" name="nameList<c:out value='[${status.index}]'/>.Reason" id="reason" value="" maxlength="255" size="25">
 </c:forEach>

function checkOnChange(name, id, min, max)
{

    var check = true;
    var originalValue = '';
    var minimum = eval(min);
    var maximum = eval(max);
    var nameVal = eval(name.value);
    if (nameVal > maxVal) 
    {
         alert(id + ' Enter the reason before proceeding');
         document.getElementById("reason").focus();
         return false;
    }
    if (itemVal < minVal) 
    {
          alert(id + ' Enter the reason before proceeding');
          document.getElementById("reason").focus();
          return false;
    }
}