How to validate a list of elements using jquery

Question

here is my form which has the childrenDetails list. I am able to validate all other attributes except this list. please help

<form:form commandName="family"
    action="${pageContext.request.contextPath}/user/family" method="POST"
    id="family-form" novalidate="novalidate">
    <table>
        <tr>
            <c:set var="marraigeStat" value="married" />
            <c:if test="${personalDetials.marriageStatus eq marraigeStat}">
                <tr>
                    <td><form:label path="spousesName">Name of Spouse</form:label>
                    </td>
                    <td><form:input path="spousesName" id="spousesName" /></td>
                </tr>
                <tr>
                    <td><form:label path="spousesAge">Spouses Age</form:label>
                    <td><form:input path="spousesAge" id="spousesAge" />
                </tr>
                <tr>
                    <td><form:label path="weddingDate">Wedding Date</form:label></td>
                    <td><form:input path="weddingDate" type="date"
                            name="weddingDate" id="weddingDate" /></td>
                    <td><form:errors path="weddingDate" /></td>
                </tr>
            </c:if>
        </tr>
        <tr>
            <td><form:label path="fatherName">Father Name</form:label></td>
            <td><form:input path="fatherName" id="fatherName" /></td>
        </tr>
        <tr>

            <td><form:label path="motherName">Mother Name</form:label></td>
            <td><form:input path="motherName" id="motherName" /></td>
        </tr>
        <tr>
            <td><form:label path="fatherAge">Father Age</form:label></td>
            <td><form:input path="fatherAge" type="date" name="fatherAge"
                    id="fatherAge" /></td>
        </tr>
        <tr>
            <td><form:label path="motherAge">Mother Age</form:label></td>
            <td><form:input path="motherAge" type="date" name="motherAge"
                    id="motherAge" /></td>
        </tr>

        <tr>
            <c:set var="childerStat" value="true" />
            <c:if test="${personalDetials.childerStatus eq childerStat}">

                <h5>child should be there</h5>

                <c:forEach items="${family.childrenDetails}" varStatus="status">
                    <tr>
                        <td><form:label
                                path="childrenDetails[${status.index}].childName"> Child Name</form:label>
                        <td><form:input
                                path="childrenDetails[${status.index}].childName" id="childName" /></td>

                        <td><form:label
                                path="childrenDetails[${status.index}].childGender">Child Gender</form:label>
                        </td>
                        <td><form:radiobutton
                                path="childrenDetails[${status.index}].childGender" value="male"
                                label="male" id="childGender" /></td>
                        <td><form:radiobutton
                                path="childrenDetails[${status.index}].childGender"
                                value="female" label="female" id="childGender" /></td>
                        <td><form:radiobutton
                                path="childrenDetails[${status.index}].childGender"
                                value="others" label="others" id="childGender" /></td>
                        <td><form:label
                                path="childrenDetails[${status.index}].childDob">Child Date of Birth</form:label></td>
                        <td><form:input
                                path="childrenDetails[${status.index}].childDob" type="date" id="childDob"/></td>

                        <td><form:label
                                path="childrenDetails[${status.index}].childCompanyName">Child Company Name</form:label></td>
                        <td><form:input
                                path="childrenDetails[${status.index}].childCompanyName" id="childCompanyName" /></td>

                        <td><form:label
                                path="childrenDetails[${status.index}].childPosition">Child Position</form:label></td>
                        <td><form:input
                                path="childrenDetails[${status.index}].childPosition" id="childPosition" /></td>
                    </tr>

                </c:forEach>
                <tr>
                    <c:if test="${familyDetails.getChildrenDetails().size()!=0 }">
                    <td><form:button name="submit" value="ADD">ADD</form:button></td>
                    <td><form:button name="submit" value="REMOVE">REMOVE</form:button></td>
                    </c:if>
                </tr>
            </c:if>



            <c:if test="${family.childrenDetails != null }">
                <tr>
                    <td><h2>CHILD DISPLAY</h2></td>
                <tr>
                    <th>Child Name</th>
                    <th>childGender</th>
                    <th>childDob</th>
                    <th>childCompanyName</th>
                    <th>childPosition</th>
                </tr>
                <tr>
                    <c:forEach items="${family.childrenDetails}" var="child"
                        varStatus="status">
                        <tr>
                            <td>${child.childName}</td>
                            <td>${child.childGender}</td>
                            <td>${child.childDob}</td>
                            <td>${child.childCompanyName}</td>
                            <td>${child.childPosition}</td>
                        </tr>
                    </c:forEach>
                </tr>
            </c:if>
        </tr>

in the able code i have to this of children details where i have assigned the id for each attributes of the list. And now with the help of this id's i am trying to validate the fields. My validations are not working only for the childrenDetails list which is inside the family. here is my javascript for validation

$(function() {
    $("#family-form").validate({

        rules : {
            spousesName : "required",
            spousesAge : "required",
            weddingDate : "required",
            fatherName : "required",
            motherName : "required",
            fatherAge : "required",
            motherAge : "required",
            childName : "required",
            childGender : "required",
            childDob : "required",
            childCompanyName :  "required",
            childPosition : "required"

        },
        messages : {
            spousesName : "please enter your spouses name",
            spousesAge : "Please enter the age of your spouses",
            weddingDate : "what is your wedding date",
            fatherName : "please enter your father name",
            motherName : "please enter your mother name",
            fatherAge : "please enter your father age",
            motherAge : "please enter your mothers age",
            childName : "required",
            childGender : "required",
            childDob : "required",
            childCompanyName :  "required",
            childPosition : "required"

        },
        submitHandler : function(form) {
            form.submit();
        }

    });
});
function goBack(){
    window.history.back();
}

please help. Thanks in advance

One of the problem is you are using id attribute e.g childName inside the for:each statement... And the basic rule is that id must be unique in the while DOM. So, That should be causing the issue. So, Make them unique and it should work as expected. — Runcorn
– Runcorn, Commented Jul 24, 2015 at 7:27
Thanks, But how do I make it unique in this case, because i don't even know how many childrenDetails Objects the user would need. As and every click of add button a new childrenDetails will be created and an empty input forms will be displayed in to front end for the user to enter the value. Now how do i make there childrenDetails attributes Id's unique. please help — Nitesh kumar
– Nitesh kumar, Commented Jul 24, 2015 at 7:43
Ok, If you are using HTMl5. Then the simplest solution would be using required attribute instead of mentioning the rules in validate. Sort of <input id="hello" required> and simply validating using $(#form-id).valdiate(). But, The problem will be custom validation message. — Runcorn
– Runcorn, Commented Jul 24, 2015 at 7:48
So, For that you could create custom validation. Please follow this answer : stackoverflow.com/questions/15749419/… — Runcorn
– Runcorn, Commented Jul 24, 2015 at 7:50
It allows you to use class instead of id as validation selector. I will update an answer demonstrating it. — Runcorn
– Runcorn, Commented Jul 24, 2015 at 7:51

Community · Accepted Answer · 2017-05-23 11:44:45Z

There could be two reasons for the Validation not working.

Uniqueness of id : MAIN Issue
Dynamic Element : New child details is being created by JavaScript. i.e. After ADD button new form block is generated : Might be the Issue

Case UN-uniqueness

Ok, The problem lies on the UN-uniqueness of the id in the DOM. So, The Basic principle is that id attribute should be unique on the whole rendered document.

<c:forEach items="${family.childrenDetails}" varStatus="status">
    <tr>
        <td>
            <form:label path="childrenDetails[${status.index}].childName">Child Name</form:label>
            <td>
                <form:input path="childrenDetails[${status.index}].childName" id="childName" />
            </td>
            <td>
                <form:label path="childrenDetails[${status.index}].childGender">Child Gender</form:label>
 //So In this block childName id will be duplicate if more than one children exists

So, Here is the example on the similar issue you are facing when id is duplicate :

JSFIDDLE DEMO 1

So, The solution would be to use class selector instead of id for the Validation. Which you can use as :

    $('#family-form').validate({ 
            rules : {
            spousesName : "required",
            spousesAge : "required",
            weddingDate : "required",
            fatherName : "required",
            motherName : "required",
            fatherAge : "required",
            motherAge : "required",
        },
        messages : {
            spousesName : "please enter your spouses name",
            spousesAge : "Please enter the age of your spouses",
            weddingDate : "what is your wedding date",
            fatherName : "please enter your father name",
            motherName : "please enter your mother name",
            fatherAge : "please enter your father age",
            motherAge : "please enter your mothers age",
        },
            submitHandler : function(form) {
            form.submit();
        }
        });

        $('.childNameValidation').each(function() {
            $(this).rules('add', {
                required: true,
                messages: {
                    required:  "Child Name is invalid",
                }
            });
        });

It could be hectic to define such for each and every other element though. But, It should do the job.

Needs to include : http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js

JSFIDDLE DEMO 2

CASE Dynamic Element

Please follow this : Adding jQuery validator rules to dynamically created elements in ASP

Diffrent Appraoch for the Issue

The easiest solution for this problem might be using the data-attribute on the form element itself :

See : Declaring jQuery Validate plugin rules -- attribute vs. class vs. code

The solution mentioned above is just my intuitive guess. So, It might or mightn't solve the issue you are facing.

Collectives™ on Stack Overflow

How to validate a list of elements using jquery

1 Answer 1

Case UN-uniqueness

JSFIDDLE DEMO 1

JSFIDDLE DEMO 2

CASE Dynamic Element

Diffrent Appraoch for the Issue

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Case UN-uniqueness

CASE Dynamic Element

Diffrent Appraoch for the Issue

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related