How to refer html element in jquery validation in content page

Total Post:89

Points:629
 1751  View(s)
Ratings:
Rate this:

I have master and content page in asp .net web application. In my content page I am doing jquery validation. I have html element without runat="server" and I don't know how to refer to this id in jquery validation.

Here is my HTML code:

<table>
    <tr>
        <td>
            Title
        </td>
        <td>
            <select id="nameTitle" runat="server" class="InputText">
                <option value="-1">--Select--</option>
                <option value="Mr.">Mr</option>
                <option value="Mrs.">Mrs</option>
                <option value="Miss.">Miss</option>
            </select>
        </td>
    </tr>
    <tr>
        <td width="130px">
            First Name:<span class="RedMainText"><sup>*</sup></span>
        </td>
        <td>
            <input type="text" id="firstName" class="InputText" size="30" />
        </td>
    </tr>
    <tr>
        <td width="130px">
            Surname:<span class="RedMainText"><sup>*</sup></span>
        </td>
        <td>
            <input type="text" id="surname" class="InputText" size="30" />
        </td>
    </tr>
</table>

Jquery validation:

rules:
{
    <%=nameTitle.UniqueID %>: { required: true },
    firstName: { required: true },
    surname: { required: true }
},
messages:
{
    <%=nameTitle.UniqueID %>: { required: "Title is required" },
    firstName: { required: "First Name is required" },
    surname: { required: "Surname is required" }
}

Here firstName and lastName are not validated while nameTitle is validated. How to refer them? please advise.

  1. Post:412

    Points:2888
    Re: How to refer html element in jquery validation in content page

    Hi Takeshi,

    for writhing jquery-validate rules you should use name of elements not their ids!

    set name for your elements and then use the name:

    <select name="nameOfTitle" id="nameTitle" runat="server"
    class="InputText">
                <option value="-1">--Select--</option>
                <option value="Mr.">Mr</option>
                <option value="Mrs.">Mrs</option>
                <option value="Miss.">Miss</option>
    </select>

    and in jquery validate use:

    rules:
    {
        nameOfTitle: { required: true },
    },
    messages:
    {
        nameOfTitle: { required: "Title is required" },
    }

    you should do the same for your other inputs as well.

      Modified On Mar-31-2018 02:03:53 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!