动态表单验证和禁用提交按钮答案

【问题标题】：Dynamic form validation and disable submit button动态表单验证和禁用提交按钮
【发布时间】：2015-06-24 08:22:48
【问题描述】：

我的表单加载了不同的输入字段，如单选按钮、文本字段、数字字段，这些字段是在遍历列表时动态生成的。

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

数字字段将根据最小值和最大值进行验证。如果任何数字字段在验证中失败，则需要禁用提交按钮。

JSFIDDLE

有什么方法可以使用 jquery 或 javascript 来实现这一点？

感谢您宝贵的时间和建议

【问题讨论】：

@LShetty 感谢您的回复。但这对这种情况有何影响？
JavaScript 不关心你的框架。仅向我们显示表单的 呈现的 HTML。
也不要标记垃圾邮件。如果问题是关于这个特定插件的，只使用jquery-validate 标签，如果问题是关于 jQuery 插件的，则只使用jquery-plugins 标签。请不要仅仅依靠 jsFiddle 来展示代码；它也必须包含在 OP 中，以防链接失效。谢谢。

标签： javascript jquery validation

【解决方案1】：

为您的输入提供 ID，然后使用 jQuery 的 .change() 函数。

例子：

HTML

<input id="test" type="number"/>
<input id="test2" type="number"/>
<input id="submit" type="submit" value="Submit"/>

var testVal = $('#test'),
    testVal2 = $('#test2'),
    submit = $('#submit'),
    minVal = 22,
    maxVal = 33;

testVal.change(function() {
    if((testVal.val() > maxVal || testVal.val() < minVal) ||
       (testVal2.val() > maxVal || testVal.val() < minVal)) {
        submit.prop('disabled', true);
    } else {
        submit.prop('disabled', false);
    }
});

jsfiddle

【讨论】：

【解决方案2】：

因此，您可以执行以下操作。

var flag = true;
if (nameVal > maxVal) {
    alert(id + ' Enter the reason before proceeding');
    //var reason = nameList[index].Reason;
    document.getElementbyId("reason" + index).focus();
    flag = false;
}
if (itemVal < minVal) {
    alert(id + ' Enter the reason before proceeding');
    //var reason = nameList[index].Reason;
    document.getElementbyId("reason" + index).focus();
    flag = false;
}

document.getElementById("submit").disabled = !flag;
return flag;

【讨论】：