Question

我正面临一个问题我已经编写了验证输入字段的代码，对其进行了测试并且工作正常。然后我使用Jquery Ajax帖子实现了表单提交。现在我的问题是，当我单击提交按钮时，我之前实现的验证功能不再被调用。没有验证。它正在提交表格。以下是我的JS代码。谢谢你的帮助

  $(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;
    });         
    });

Answer 1

使用类似的东西：

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

   ...
});

Answer 2

看一下这个例子，在验证插件中使用Ajax。检查页面来源，

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

Jquery表单验证不与Ajax Submit一起使用

2 个答案: