jQuery Validation with Web Forms

Question

I don't know what's wrong but when clicking on the textbox I alway get

Uncaught TypeError: Cannot read property 'settings' of undefined

Here's my code (simplified for clarity):

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<div id="MessageForm">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:Button ID="Button1" runat="server" Text="doPostBack" />
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#MessageForm').validate({
            rules: {
                <%= TextBox1.ClientID %>: {
                        required: true,
                        minlength: 6,
                        maxlength: 25
                    }
                },
                messages:{
                    <%= TextBox1.ClientID %>: {
                        required: "Please enter the address.",
                        minlength: $.validator.format("The address name must be at least {0} characters."),
                        maxlength: $.validator.format("The address name must not exceed {0} characters.")
                    }
                },
                errorClass: "error-label",
                wrapper: "li",
                errorLabelContainer: "#ErrorSection"
            });
        });
</script>

I already tried

changing <div id="MessageForm"> to <div id="MessageForm" runat="server">
changing $('#MessageForm').validate to $('#MainContent_MessageForm').validate
changing <%= TextBox1.ClientID %> to the generated client id (MainContent_TextBox1) or with the generated name (MainContent$Contenteplaceholder$ etc)

The problem only uccurs when using a Master page

May this be due to the fact that my referred element is a <div>? I am using Web Forms, so I can't use another <form> tag

As described [here](http://stackoverflow.com/questions/4936221/jquery-validate-plugin-on-div) and [here](http://stackoverflow.com/questions/487430/validate-inputs-that-are-not-inside-a-form-with-jquery-validation-plugin), you must use a `form` for jQuery Validate plugin. I haven't tested but did you try [validator.element()](http://jqueryvalidation.org/Validator.element) — Syed Ali Taqi, Mar 02 '16 at 10:52
@SyedAliTaqi Thanks, I can easily change the element to a `
` but it's not enought. I find unbelievable that nowadays one can't easily integrate jquery validation on webforms. I'm just going to use standard validators, thanks. Please post your answer — AlexanderD, Mar 02 '16 at 11:03

score 1 · Accepted Answer · edited May 21 '19 at 04:28

1

As described here and here, you must use a form for jQuery Validate plugin. I can't tell of a specific plugin that'll meet your requirements but you can have a look at this.

edited May 21 '19 at 04:28

Dale K

25,246
15
42
71

answered Mar 02 '16 at 11:18

Syed Ali Taqi

4,898
3
34
44

jQuery Validation with Web Forms

1 Answers1