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>");
            });
    }

Answer 1

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 eg adding the alert after the select element..

Answer 2

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