Dynamic form validation and disable submit button

Question

My form is loaded with different input fields like radio button , text field ,numeric field which are generated dynamically while iterating through a list.

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

The numeric fields will be validated against minimum and maximum values.if any of the numeric fields fails in the validation , submit button needs to be disabled .

JSFIDDLE

Any ways to achieve this using jquery or javascript?

Thanks for your valuable time and suggestions

@LShetty Thanks for your reply.But how will that make any difference for this scenario? — jaggs
– jaggs, Commented Apr 17, 2015 at 13:17
JavaScript does not care about your framework. Show us only the rendered HTML of the form. — Sparky
– Sparky, Commented Apr 17, 2015 at 15:02
Also do not tag-spam. Only use the jquery-validate tag if the question is about this specific plugin and the jquery-plugins tag if the question is about jQuery plugins in general. Please do not rely solely on the jsFiddle to show the code; it must also be included in the OP in case the link goes dead. Thanks. — Sparky
– Sparky, Commented Apr 17, 2015 at 15:05

Walker Boh · Accepted Answer · 2015-04-17 14:50:29Z

1

Give IDs to your inputs and then use jQuery's .change() function.

Example:

HTML

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

JS

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

answered Apr 17, 2015 at 14:50

Walker Boh

7706 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lshettyl · Accepted Answer · 2015-04-17 13:45:14Z

0

So, you could do something like below.

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;

answered Apr 17, 2015 at 13:45

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Dynamic form validation and disable submit button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related