CODEWITHSUNDEEP
javascriptjquery
newbie
newbie

Reputation: 261

Validating specific set of form elements

I have a form and while submitting i need to loop through only set of specific text boxes and display an alert in a manner of " label name - text field value" , where ever the text box value is blank/null.To group the specific set of text boxes, i think i should define their ids in a specific manner ( e.g group1, group2 etc), please suggest.And is this a good idea to find the label name using text box id, Or it can be done in simpler approach. Thanks.

<form>
<table>
<tr id=""><td width='5%'><label> Row 1 :</label></td>other text boxes</tr>
<tr id=""><td width='5%'><label> Row 2 :</label></td><td width='10%'><input type='text' id=textbox1 name=text1></td></tr>
<tr id=""><td width='5%'><label> Row 3 :</label></td><td width='10%'><input type='text' id=textbox1 name=text1></td></tr>
<tr id=""><td width='5%'><label> Row 4 :</label></td><td width='10%'><input type='text' id=textbox1 name=text1></td></tr>
</table>
</form>

Upvotes: 0

Views: 69

Answers (1)

DevlshOne
DevlshOne

Reputation: 8457

jsFiddle

HTML

<form>
    <table>
        <tr id="">
            <td width='5%'>
                <label>Row 1 :</label>
            </td>
            <td width='10%'>
                <input type='text' class="required" name="text1" />
            </td>
        </tr>
        <tr id="">
            <td width='5%'>
                <label>Row 2 :</label>
            </td>
            <td width='10%'>
                <input type='text' class="required" name="text2" />
            </td>
        </tr>
        <tr id="">
            <td width='5%'>
                <label>Row 3 :</label>
            </td>
            <td width='10%'>
                <input type='text' class="required" name="text3" />
            </td>
        </tr>
        <tr id="">
            <td width='5%'>
                <label>Row 4 :</label>
            </td>
            <td width='10%'>
                <input type='text' class="required" name="text4" />
            </td>
        </tr>
    </table>
    <tr>
        <td colspan="2">
            <input type="button" id="btnSubmit" value="Submit" />
        </td>
    </tr>
</form>

jQuery

$(function () {
    $('#btnSubmit').click(function () {
        var requireds = $(':text.required');
        requireds.each(function (i) {
            if ($(this).val() === "") {
                var label = $(this).closest('tr').find('label').text();
                alert(label + 'is empty!');
            }
        });
    });
});

Upvotes: 1

Related Questions