jQuery validate input id and submitHandler

Question

I have two forms in a user control, posting an email with jQuery and Ajax. Unfortunately, our cms using .NET Web Forms and master pages, which makes name attribute changing. This makes it difficult to use jquery validate, since it is based on the attribute name. Do you have any suggestions how I can solve this ?

Code

 $(function () {
        $("#tbSendComment").click(function (e) {

            $('#formComment').validate({
                rules: {
                    ctl00$mainPlaceHolder$ctl02$tbCommentSubject: "required",
                    ctl00$mainPlaceHolder$ctl02$tbCommentMessage: "required",
                    ctl00$mainPlaceHolder$ctl02$tbCommentName: "required",
                    ctl00$mainPlaceHolder$ctl02$tbCommentEmail: {
                        required: true,
                        email: true
                    }
                },


                submitHandler: function (form) {
                    var obj = {};
                    var Uri = '<%: Uri %>';
                    var Title = '<%: Title %>';
                    obj.subject = $("#tbCommentSubject").val();
                    obj.message = $("#tbCommentMessage").val();
                    obj.name = $("#tbCommentName").val();
                    obj.fromEmail = $("#tbCommentEmail").val();
                    obj.cc = $("#cbSendMeCoppyComment").prop('checked');
                    obj.title = Title;
                    obj.uri = Uri;


                    var jsonData = JSON.stringify(obj);

                    $.ajax({
                        type: "POST",
                        url: "/leaveacomment",
                        data: jsonData,
                   success: function successFunc(data) {
                   etc 
                   etc

http://stackoverflow.com/questions/619816/jquery-validation-plugin-in-asp-net-web-forms — BenG, May 10 '16 at 09:44
Yes, I have seen this but I can´t get it to work with my submitHandler, which I need so that my form is not posted in case the validation fails. — Jonas, May 10 '16 at 09:52
You should not have the `.validate()` method inside of a `click` handler function. The only purpose of `.validate()` is to ***initialize*** the plugin on your form. This method does not get fired every time you click a button since the plugin automatically captures the click event. Also, if you're using ASP, then the `.validate()` method is constructed automatically by the `unobtrusive-validation` plugin and your version of `.validate()` will always be ignored. — Sparky, May 10 '16 at 14:51

Jaqen H'ghar · Accepted Answer · 2016-05-10T10:24:02.013

You can solve this problem easily by Using Web Form's special solution:

Instead of writing the whole name hard-coded, use the dynamic control.UniqueID

control.UniqueID is what .NET use for your element name attribute on the Client side

Unfortunately, our cms using .NET Web Forms and master pages, which makes name attribute changing.

You will never have to worry about your elements name changes because it will dynamically change with your elements name changes

In the Client side use it like:

var name = "<%= txtTest.UniqueID %>";

MSDN

jQuery validate input id and submitHandler

1 Answers1