Jquery Form validation not working along with Ajax Submit

Question

I am facing an issue.
I have written code for validating my input fields, tested it and it was working fine. Then i implemented form submit using Jquery Ajax post. Now my problem is that the validate function which i implemented earlier is no longer getting called when i click the submit button. Without validation. it is submitting the form. Following is my JS code. Thanks for the help

  $(document).ready(function(){

        $('#incForm input').mouseover(function()
        {
            $(this).popover('show')
        });
        $('#incForm input').mouseout(function() {
        $(this).popover('hide')
    });         

    $('form').validate({
      rules: {
        problemId: {
          required: true
        },
        problemType: {
          required: true
        }
      },

      showErrors: function(errorMap, errorList) {

          $.each( this.successList , function(index, value) {
              $(value).popover('hide');
              $(value).parents('.control-group').removeClass('error');
                  $(value).parents('.control-group').addClass('success');
          });

          $.each( errorList , function(index, value) { 
               var _popover = $(value.element).popover({
                    trigger: 'manual',
                    placement: 'top',
                    content: value.message,
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
                });

               _popover.data('popover').options.content = value.message;
               $(value.element).parents('.control-group').addClass('error');
               $(value.element).popover('show');

          });
      }


    });         
    //if submit button is clicked
    $('#submit').click(function () {       

        //show the loading sign
        $('#btSpModal').modal('show') ; 
        $('.loading').show();


        //start the ajax
        $.ajax({
            //this is the php file that processes the data and send mail
            url: "/~xrenpill/mvc/process_form.php",

            //GET method is used
            type: "POST",

            data: $("#incForm").serialize(),
            //Do not cache the page
            cache: false,

            //success
            success: function (html) {             
                //if process.php returned 1/true (send mail success)
                $('#btdpModal').modal('hide') ; 
                $('.loading').hide();
                if (html==1) {                 
                    //hide the form
                    $('.form').fadeOut('slow');                

                    //show the success message
                    $('.done').fadeIn('slow');

                //if process.php returned 0/false (send mail failed)
                } else alert('Sorry, unexpected error. Please try again later.');              
            }      
        });

        //cancel the submit button default behaviours
        return false;
    });         
    });

validation and ajax submit happens at same time. You need to validate first and if there are no errors then you should submit the form. — Muthu Kumaran
– Muthu Kumaran, Commented Sep 23, 2012 at 15:42

webdeveloper · Accepted Answer · 2012-09-23 15:48:40Z

2

Use something like this:

$('#submit').click(function (e){   
   e.preventDefault();
   if(!$("form").valid()) return;

   ...
});

answered Sep 23, 2012 at 15:48

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muthu Kumaran · Accepted Answer · 2012-09-23 15:53:49Z

2

Take a look at this example for using Ajax in validation plugin. check on page source,

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

answered Sep 23, 2012 at 15:53

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

Collectives™ on Stack Overflow

Jquery Form validation not working along with Ajax Submit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related