0

私は問題に直面しています。
入力フィールドを検証するためのコードを記述し、テストしましたが、正常に機能していました。次に、JqueryAjax投稿を使用してフォーム送信を実装しました。今、私の問題は、送信ボタンをクリックしたときに、以前に実装した検証関数が呼び出されなくなったことです。検証なし。フォームを送信しています。以下は私の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

次のようなものを使用します。

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

   ...
});
于 2012-09-23T15:48:40.893 に答える
2

検証プラグインでAjaxを使用するためのこの例を見てください。ページソースを確認し、

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

于 2012-09-23T15:53:49.480 に答える