tags:

views:

55

answers:

1

Greeting,

I'm using jquery Plugins/Validation library. I want to allow validation on submitting but I'm not sure where I should insert the code: I know that I can user submitHandler for that but after reading the document I had hard time to implement it so I need your help guys.

jquery validation is working ok but the problem that the form still submitted even there are invalid inputs.

here is my validation function and I want to know how can I make it to not submit the form if there is invalid input.

by the way, I'm using asp.net button for submitting the form.

here is my code:

  $(document).ready(function() {


             $("#aspnetForm").validate({




                 rules: {
                     "<%=txtHomePhone.UniqueID %>": {

                         phonehome: true
                     },

                     "<%=txtMobileHome.UniqueID %>": {

                         mobilephone: true


                 },

                   "<%=txtFaxHome.UniqueID %>": {

                   faxhome: true

               },

               "<%=txtEmailHome.UniqueID %>": {

                   email: true

               },


               "<%=txtZipCodeHome.UniqueID %>": {

               ziphome: true

               },

               //work
                           "<%=txtPhonework.UniqueID %>": {

                         phonework: true
                     },

                     "<%=txtMobileWork.UniqueID %>": {

                         mobilework: true


                 },

                   "<%=txtFaxWork.UniqueID %>": {

                   faxwork: true

                     },
                     "<%=txtEmailWork.UniqueID %>": {

                   email: true

               },

               "<%=txtWebSite.UniqueID %>": {

                   url: true

               },
               "<%=txtZipWork.UniqueID %>": {

               zipwork: true

               }



                 },




                   errorElement: "mydiv",
                    wrapper: "mydiv",  // a wrapper around the error message

                      errorPlacement: function(error, element) {
                      offset = element.offset();
                      error.insertBefore(element)
                      error.addClass('message');  // add a class to the wrapper
                      error.css('position', 'absolute');
                      error.css('left', offset.left + element.outerWidth());
                      error.css('top', offset.top - (element.height() / 2));

                  }



            });
A: 

to enable debugon submit I need to set debug to true in validate function for the rules by adding this line : debug: true,

correct code:

$(document).ready(function() {


         $("#aspnetForm").validate({


                debug: true,

             rules: {
                 "<%=txtHomePhone.UniqueID %>": {

                     phonehome: true
                 },

                 "<%=txtMobileHome.UniqueID %>": {

                     mobilephone: true


             },

               "<%=txtFaxHome.UniqueID %>": {

               faxhome: true

           },

           "<%=txtEmailHome.UniqueID %>": {

               email: true

           },


           "<%=txtZipCodeHome.UniqueID %>": {

           ziphome: true

           },

           //work
                       "<%=txtPhonework.UniqueID %>": {

                     phonework: true
                 },

                 "<%=txtMobileWork.UniqueID %>": {

                     mobilework: true


             },

               "<%=txtFaxWork.UniqueID %>": {

               faxwork: true

                 },
                 "<%=txtEmailWork.UniqueID %>": {

               email: true

           },

           "<%=txtWebSite.UniqueID %>": {

               url: true

           },
           "<%=txtZipWork.UniqueID %>": {

           zipwork: true

           }



             },




               errorElement: "mydiv",
                wrapper: "mydiv",  // a wrapper around the error message

                  errorPlacement: function(error, element) {
                  offset = element.offset();
                  error.insertBefore(element)
                  error.addClass('message');  // add a class to the wrapper
                  error.css('position', 'absolute');
                  error.css('left', offset.left + element.outerWidth());
                  error.css('top', offset.top - (element.height() / 2));

              }



        });
Eyla