jQuery验证-领域重点

Question

我有一个要填写输入字段列表的表格，输入的值将根据最小和最大标准进行验证。如果输入的值不属于标准，则需要触发用户输入原因，然后输入输入后重。

<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>

因此，一旦输入了initalWeight，就​​会触发onchange事件，以检查该值是否在最小值和最大值中。如果不符合标准，则会提醒用户输入原因，并应将屏幕焦点置于在原因字段上。

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链接： http : //jsfiddle.net/jegadeesb/ehehjxbp/

有没有更好的方法来实现这一目标。请分享您的建议。

感谢您的宝贵建议和宝贵时间

Answer 1

添加原因字段的ID，并使用focus方法设置焦点

<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;
    }
}