jQuery trigger transition on validate

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 в «щелчок» события кнопки, означает, что когда пользователь нажимает кнопку, вы будете выполнять fadein.

Решение? достаточно просто, просто взгляните на документ jqueryvalidation doc (http://jqueryvalidation.org/validate), вместо fadein в событии нажатия кнопки, просто сделайте это в кадре проверки.

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