如何使用JQuery确定控件是否具有必填字段验证器

Question

I am using ASP.NET 4.5 with C#.

I have an aspx page that contains several asp textboxes. Some of them are mandatory to be filled on submitting the form while some of them and non-mandatory.

On client side OnBlur event I want to check whether the text-box is mandatory or not?

For mendatory text-boxes I already have required field validators are there in the form. Also to validate the textboxes I am using onblur="ValidatorOnChange(event);".

I have created a JQuery function which is called onblur event of each control ie given beolow :

 $(document).ready(function () {
                disableResetButton();
                disableSaveButton();

                $("input").blur(function (event) {
                    var id = event.target.id;
                    var value = $("#" + id).val();
                    if (document.getElementById(id).className.match(/(?:^|\s)txtRequireBorder-Color(?!\S)/) && value != '') {
                        document.getElementById(id).className = document.getElementById(id).className.replace(/(?:^|\s)txtRequireBorder-Color(?!\S)/g, ' txtBorder-Color');
                    }
                    var $validator = $("[ControlToValidate=" + this.id + "]");
                    alert($validator.length);

                    //else if (document.getElementById(id).className.match(/(?:^|\s)txtRequireBorder-Color(?!\S)/)) {

                       // document.getElementById(id).className = document.getElementById(id).className.replace(/(?:^|\s)txtBorder-Color(?!\S)/g, ' txtRequireBorder-Color');

                });

                setBorder();
            });

The example of text-box on form is as below :

<tr style="vertical-align: top;">
                        <td align="left" class="formlabel2" valign="top" width="17%" id="tdFirstName">
                            <asp:Label ID="lblFName" runat="server" Text="First Name"></asp:Label>
                        </td>
                        <td align="left" valign="top" colspan="2" width="40%">
                            <asp:TextBox ID="txtFname" runat="server" CssClass="txtBoxWidthMiddle txtSingleline txtBack-Color txtRequireBorder-Color"
                                MaxLength="50" TabIndex="2" onblur="ValidatorOnChange(event);"></asp:TextBox>
                            <br />
                            <asp:RequiredFieldValidator ID="rfvFname" runat="server" ControlToValidate="txtFname"
                                ErrorMessage="First Name is required" ValidationGroup="a" Display="Dynamic"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="revFname" runat="server" ControlToValidate="txtFname"
                                ErrorMessage="Please enter proper first name" ValidationGroup="a" Display="Dynamic"
                                ValidationExpression="^[\w. ,'#&$~@!&quot;-]*$"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr style="vertical-align: top;">
                        <td align="left" class="formlabel2" valign="top" width="20%">
                            <asp:Label ID="lblMName" runat="server" Text="Middle Name"></asp:Label>
                        </td>
                        <td align="left" valign="top" colspan="2">
                            <asp:TextBox ID="txtMname" runat="server" CssClass="txtSingleline txtBoxWidthMiddle txtBorder-Color txtBack-Color"
                                TabIndex="3" onKeyDown="return (event.keyCode != 13)" MaxLength="50"></asp:TextBox>
                            <br />
                            <asp:RegularExpressionValidator ID="revMname" runat="server" ControlToValidate="txtMname"
                                ErrorMessage="Please enter proper middle name" ValidationGroup="a" Display="Dynamic"
                                ValidationExpression="^[\w. ,'#&$~@!&quot;-]*$"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" class="formlabel2" valign="top">
                            <asp:Label ID="lblLName" runat="server" Text="Last Name"></asp:Label>&nbsp;
                        </td>
                        <td align="left" valign="top" colspan="2" width="38%">
                            <asp:TextBox ID="txtLname" runat="server" CssClass="txtBoxWidthMiddle txtSingleline txtBack-Color txtRequireBorder-Color"
                                TabIndex="4" MaxLength="50" onblur="ValidatorOnChange(event);"></asp:TextBox>
                            <br />
                            <asp:RequiredFieldValidator ID="rfvLName" runat="server" ControlToValidate="txtLname"
                                ErrorMessage="Last Name is required" ValidationGroup="a" Display="Dynamic"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="revLname" runat="server" ControlToValidate="txtLname"
                                ErrorMessage="Please enter proper last name" ValidationGroup="a" Display="Dynamic"
                                ValidationExpression="^[\w. ,'#&$~@!&quot;-]*$"></asp:RegularExpressionValidator>
                        </td>
                    </tr>

Now, How can I determine whether the blur event is called from mandatory text-box or from non-mandatory text box?

Thanks.

Answer 1

Because validation requires the attribute 'data-val-required' try this:

var attr = $(this).attr('data-val-required');
if(typeof attr!=='undefined' && attr!==false){
//blah blah code
}

Cheers.