Question

我正在使用一些jQuery来进行一些表单验证。以下是验证脚本。

$(document).ready(function() {

  $('#contact-form').validate({

    rules: {
      cf_name: {
        minlength: 2,
        required: true
      },

      cf_email: {
        required: true,
        email: true
      },

      phone: {
        minlength: 10,
        required: true
      },

      user_pass: {
        minlength: 2,
        required: true
      },

      validateSelect: {
        required: true
      },

      validateCheckbox: {
        required: true,
        minlength: 2
      },

      validateRadio: {
        required: true
      }
    },

    focusCleanup: false,
    highlight: function(label) {
      $(label).closest('.control-group').removeClass('success').addClass('error');
    },

    success: function(label) {
      label

      //.text('OK!').addClass('valid')
        .closest('.control-group').addClass('success');
    },

    errorPlacement: function(error, element) {
      error.appendTo(element.parents('.controls'));
    }
  });
  $('.form').eq(0).find('input').eq(0).focus();
}); // end document.ready

在我的提交按钮上，我有以下代码：

 <input type="submit" value="SUBMIT" id="sub" class="sub_text">

我想这样做，以便当用户点击提交按钮并且表单在进行任何淡入/转换之前验证时，它会在此代码中执行：

$("#sub").click(function(){

    $("#forms").fadeOut( 1000 );        
    $("#overlay1").delay(1000).fadeIn( 1000 );        

});

但我的问题是，如果用户忘记某个字段然后点击提交，则会发生叠加转换。我希望它只发生在有一个验证的成功。

我怎样才能在事件验证时触发事件？

Answer 1

您是否尝试过调用form.valid()，如下所示：

$("#sub").click(function(){
    if($('#contact-form').valid()){
        $("#forms").fadeOut( 1000 );        
        $("#overlay1").delay(1000).fadeIn( 1000 ); 
    }       
});

.valid()检查给定的表格是否有效。

Answer 2

你使用了错误的钩子。您正在将您的fadein代码附加到＆＃34;点击＆＃34;按钮的事件，意味着当用户单击按钮时，您将执行淡入淡出。

解决方案？很简单，只需查看jqueryvalidation doc（http://jqueryvalidation.org/validate），而不是按钮的click事件中的fadein，只需在验证钩子中执行即可。

$('#contact-form').validate({
  submitHandler: function(form) {
    $("#forms").fadeOut( 1000 );        
    $("#overlay1").delay(1000).fadeIn( 1000 );   
    // do other things for a valid form
    form.submit();
  }
});

验证时jQuery触发转换

2 个答案: