Dynamic field validation in jQuery

Question

I want to do dynamic validation for a <tr> in a table using jQuery. Have to do null validation for each field. Validate plugin should not be used.

HTML code for table:

<table id="stutdent" class="studentForm" border="0">
    <tbody>
        <div class="inputField">
            <tr class="dynamicRow">
                <td>
                    <b><bean:message key="label.student.code" />:</b>
                </td>
                <td class="studentCreateSelect">
                    <html:select property="studentCreate" styleId="studentCreateSelect" >
                        <html:option value="">
                            <bean:message key="label.student.code.select" />
                        </html:option>
                        <html:option value="A">A</html:option>
                        <html:option value="B">B</html:option>
                        <html:optionsCollection name="studentForm" property="studentList" label="label" value="value" />
                    </html:select>
                </td>
            </tr>
        </div>
        <div class="inputField">
            <td>
                <b><bean:message key="label.student.name" />:</b>
            </td>
            <td class="sNameList">
                <html:text property="sNameList" name="studentForm" styleId="sNameList" size="10" maxlength="6"></html:text>
            </td>
        </div>

On click of Add, rows are getting added dynamically. I'm able to do validation for the first row but not dynamically. Kindly help.

My code for add:

function addRow() {
    var $rowObj = $("#stutdent tr:first");
    $rowObj.clone().insertAfter($rowObj);
    $('.add_btn', $rowObj).replaceWith('<button id="remove_row" onclick="delRow(this)">Del</button>'); // Remove the button from the previous tr, otherwise each row will have it.
}
Able to validate messages dynamically
My new issue: Messages are not shown under the field but getting displayed next to it
It has to be shown below each field

Kindly help
My validation code :

    function validateNewDockGate(fromScreen){
    $("tr.dynamicRow").each(function() {
                    var d = $(this).find(".studentCreateSelect").val();
                    if(d === "")
                     valid = false;
                     $(this).find(".studentCreateSelect").after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please select Student id</div>");
                     var e = $(this).find(".sNameList").val();
                    if(e === "")
                     valid = false;
                     $(this).find(".sNameList").after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please select Student id</div>");
            });
    }

use deep clone which will copy the even handlers too. Like `$rowObj.clone(true).insertAfter($rowObj);` — Beingnin, Jul 20 '20 at 04:41
Okay..How to add the validation for the dropdown/textfields? — Padmaja, Jul 20 '20 at 04:44
My validation code part : $("tr.dynamicRow").each(function() { var d = $("#studentCreateSelect").val(); if($("#studentCreateSelect").val() === "") valid = false; $("#studentCreateSelect").after("
Please select Student id
"); }); — Padmaja, Jul 20 '20 at 04:44
My issue is to add validation for the fields dynamically. Rows are getting added but validation not able to do dynamically.Have to do only form validation mainly check if values are not null in any field.Kindly advise. — Padmaja, Jul 20 '20 at 04:52
can you post your code in which you have registered the event handler for validation? — Beingnin, Jul 20 '20 at 04:53
Sorry I didn't understand. Not using any event handler. Only using client side validation. On click of 'Save' a javascript method to be called to do dynamic validation. — Padmaja, Jul 20 '20 at 08:50
Where is the validation? Please edit your question, show your code. — Don't Panic, Jul 20 '20 at 08:57
Validation method : function validateNewStudent(fromScreen){ $("tr.dynamicRow").each(function() { var d = $("#studentCreateSelect").val(); alert(d); if($("#studentCreateSelect").val() === "") valid = false; $("#studentCreateSelect").after("
Please select Student id
"); }); } Don't know how to do it dynamically.Kindly help. — Padmaja, Jul 20 '20 at 09:06
Selectors and event handlers specified at page load will only match elements which exist at page load. You are adding new elements *after* page load, and your event listeners will not match them - jQuery doesn't know about those new elements. You need to delegate your handlers to an element that exists at load, and filter to match only your target elements. This is a very common problem, and there are many duplicates and variations here on SO, [here's one](https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery). — Don't Panic, Jul 20 '20 at 22:55
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Don't Panic, Jul 20 '20 at 22:55

Ali Sheikhpour · Answer 1 · 2020-07-20T14:36:27.897

0

When you have multiple elements you should switch to Class selector (ID selector is just valid for first occurance). So change #studentCreateSelect to .studentCreateSelect and then:

$("tr.dynamicRow").each(function() { 
    var d = $(this).find(".studentCreateSelect").val(); 
    if(d === "") {
        valid = false; 
        $(this).after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please select Student id</div>"); 
    }
});

If you can not edit and add class to those elements, You may simply use Tag selector instead:

var d = $(this).find("select").val();

Note: .after is not valid usage for TR element. It will break the table structure. You also need to find another method to show alert e.g adding the alert after the select element..

edited Jul 20 '20 at 14:36

answered Jul 20 '20 at 09:13

Ali Sheikhpour

8,724
4
29
66

I dont have a class attribute named studentCreateSelect. Below is my code for this dropdown – Padmaja Jul 20 '20 at 10:09
: A B – Padmaja Jul 20 '20 at 10:10
Using same ID for multiple elements is not valid however my answer may work for ID selector too because it is using `.find` inside individual TRs and there are not multiple IDs.@Padmaja – Ali Sheikhpour Jul 20 '20 at 11:04
In my case we do have multiple IDs.How to show validation messages for multiple IDs? – Padmaja Jul 20 '20 at 12:29
One table row contains set of drop downs and text boxes.How to show validation messages dynamically on click of save under each field. – Padmaja Jul 20 '20 at 12:30
I edited the answer responding to last two comments. @Padmaja – Ali Sheikhpour Jul 20 '20 at 14:36
Hi..Thank you..It is working..But facing one problem.Messages are displayed next to the field and not below them.My code part is commented below – Padmaja Jul 20 '20 at 18:15
function validateNewDockGate(fromScreen){ $("tr.dynamicRow").each(function() { var d = $(this).find(".studentCreateSelect").val(); if(d === "") valid = false; $(this).find(".studentCreateSelect").after("
Please select Student id
"); }); } Kindly help – Padmaja Jul 20 '20 at 18:17
Please open a new question for this new problem to help others having same problem and you may find better answers than my opinion. Aslo if the current answer was helpful to the original post, you can kindly accept it. @Padmaja – Ali Sheikhpour Jul 20 '20 at 19:16
Edited my question with the new issue. @Ali sheikhpour – Padmaja Jul 21 '20 at 04:52

score -1 · Answer 2 · answered Jul 21 '20 at 04:43

-1

The answer for my question: var student = $(this).find(".studentCreateSelect").val(); Using this able to validate messages dynamically.

answered Jul 21 '20 at 04:43

Padmaja

69
6

Dynamic field validation in jQuery

2 Answers2