Jquery 验证 - 领域焦点

Question

我有一个表单，其中包含要填写的输入字段列表 in.The 输入的值将根据最小值和最大值进行验证 criteria.If 输入的值不符合条件，用户需要触发输入原因，然后输入后重量。

<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事件来检查这个值是否在min和max中value.If它不符合标准，会提醒用户输入原因，屏幕焦点应位于原因字段。

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/

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

感谢您宝贵的建议和时间

Answer 1

使用 focus 方法

为原因字段添加 ID 并设置焦点

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

Jquery 验证 - 领域焦点

Jquery validation - field focus

javascript

jquery

jsp

jquery-plugins

focus