0

我面临一个问题。
我已经编写了用于验证我的输入字段的代码，对其进行了测试并且工作正常。然后我使用 Jquery Ajax post 实现了表单提交。现在我的问题是，当我单击提交按钮时，我之前实现的验证功能不再被调用。未经验证。它正在提交表单。以下是我的 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;
    });         
    });
4

2 回答 2

2

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

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

于 2012-09-23T15:53:49.480 回答
2

使用这样的东西：

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

   ...
});
于 2012-09-23T15:48:40.893 回答