CODEWITHSUNDEEP
javascriptjquerylocalization
foo-baar
foo-baar

Reputation: 1104

How to get the value of closest SPAN?

I have created a registration form and now I am trying to put null validations on the fields. All fields are location inside one table like :

<table border="0" cellspacing="5" width="100%">
        <tr>
            <td width="50%" valign="top">
                <span id="ctl00_PageBody_lblFname">Prénom</span>
                <strong><font color="#FF0000">*</font></strong><br />
                <input name="ctl00$PageBody$txtFname" type="text" id="ctl00_PageBody_txtFname" rel="First Name" />

                <br />

                <span id="ctl00_PageBody_lblLname">Nom</span>
                <strong><font color="#FF0000">*</font></strong><br />
                <input name="ctl00$PageBody$txtLname" type="text" id="ctl00_PageBody_txtLname" rel="Last Name" />
             </td>
         </tr>
</table>

Now using jquery I am trying to create a generic function which iterates through all the text boxes and if they are empty it displays a message mentioning the Field Name :

        var Msg = "Please provide values for :";
        var nullFieldTracked = 'false';

        $('input[type="text"], select').each(function () {
            if (this.value == '' && this.hasAttribute("rel")) {
                nullFieldTracked = 'true';
                Msg += '\n - ' + $(this).attr('rel');
            }
        });
        if (nullFieldTracked == 'true') {
            alert(Msg);
            return false;
        }

Code works like charm, I have added a 'rel' attribute to the textboxes in order to read the Field Name, BUT

Now there is a change in the requirement and I need to launch this website in multipul languages and hence it will read the attributes from the resource files and asp.net doesn't create a meta resource for 'rel' tag, So I am thinking to reading the Field Name from the closest Span, but not able to Track.

Kindly help with Jquery.

Thanks a lot in advance.

Upvotes: 1

Views: 2324

Answers (3)

Sangeeta
Sangeeta

Reputation: 164

Use .closest() this gives nearest selector element.

Upvotes: 0

user1432124
user1432124

Reputation:

To retreive value from closest span

$(this).prevAll("span").first().text()

Upvotes: 1

Naveed
Naveed

Reputation: 11167

not sure if you can add data-attribute in your text field in .net

If yes, you can store span's id in data attribute of input that will have.each text field should save span id in his data attribute like

                <input name="ctl00$PageBody$txtFname" type="text" id="ctl00_PageBody_txtFname" rel="First Name" data-error-span = '#span1'/>

now in your JS

$('input[type="text"], select').each(function () {
        if (this.value == '' && this.hasAttribute("rel")) {
            nullFieldTracked = 'true';
            Msg += '\n - ' + $($(this).data('error-span')).val();
        }
    });

another option could be to store error in data attribute then JS would be

Msg += '\n - ' +  $(this).data('error-message');

which also looks readable

Awesome Rails :)

Upvotes: 0

Related Questions