動態表單驗證並禁用提交按鈕

我的表單加載了不同的輸入字段，例如單選按鈕，文本字段，數字字段，這些字段在遍歷列表時動態生成。動態表單驗證並禁用提交按鈕

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

的數字字段將針對最小值和最大值進行驗證values.if任何數字領域的失敗審定，提交需要被禁用按鈕。

JSFIDDLE

實現這個使用jQuery或JavaScript的任何方式？

感謝您的寶貴時間和建議

來源

2015-04-17 jaggs

@LShetty感謝您reply.But如何使這個方案有什麼區別？ – jaggs

JavaScript不關心你的框架。僅向我們展示***呈現的表單的HTML。 – Sparky

也不要標記垃圾郵件。如果問題是關於這個特定插件的話，那麼只使用[tag：jquery-validate]標籤，如果問題是關於jQuery插件的話，那麼只需使用[tag：jquery-plugins]標籤。請不要單純依靠jsFiddle來顯示代碼;它也必須包含在OP中，以防鏈路死亡。謝謝。 – Sparky

爲您的輸入提供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

來源

2015-04-17 14:50:29

因此，你可以做下面的事情。

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;

來源

2015-04-17 13:45:14 lshettyl

動態表單驗證並禁用提交按鈕

回答

相關問題