驗證jQuery觸發器轉換

我正在使用一些jQuery做一些表單驗證。以下是驗證腳本。驗證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);   

});

但我的問題是，如果用戶忘記一個區域，然後點擊提交，覆蓋過渡發生。我希望它僅在驗證成功時纔會發生。

我怎麼才能夠觸發事件，只有當它被驗證？

來源

2016-01-10 MrTechie

對不起，我毀了你的完美千元。 ;-) –

@ some-non-descript-user沒關係！我熱愛前進。我現在值得更多。謝謝你，以及。 ;） – MrTechie

爲什麼不只是把過渡成功回調...？ –

你有沒有打過電話form.valid()如下：給定形式

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

.valid()檢查是否是有效還是無效。

來源

2016-01-10 19:52:23 vijayP

似乎沒有照顧到這個問題。 – MrTechie

哦真的......但根據插件文檔'.valid（）'只有在表單完全填充正確的方式時才返回true，我的意思是填充有效信息。 – vijayP

不確定它會工作，因爲單擊事件將在驗證之前觸發...所以'if（$（'＃contact-form'）.valid（））{'還沒有正確的值 –

您正在使用錯誤的掛鉤。您將您的淡入淡出代碼附加到按鈕的「單擊」事件中，意味着當用戶單擊按鈕時您將執行淡入淡出。

解決方案？很簡單，只需看看jqueryvalidation doc（http://jqueryvalidation.org/validate），而不是在按鈕的單擊事件中淡入淡出，只需在驗證鉤子中進行即可。

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

來源

2016-01-10 19:52:58

我相信我其實已經嘗試過，但無法讓它正常開火。 – MrTechie

驗證jQuery觸發器轉換

回答

相關問題