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

使用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验证 - 字段焦点

1 个答案: