1
У меня есть мастер шага jquery (3 шага), внутри которого существует одна форма. Когда переходите к следующему шагу, я пытаюсь проверить поля первой шаговой формы с помощью метода valid() (это нормально), но когда я пытаюсь проверить второй шаг jquery validate, всегда возвращайте true. Таким образом, он переходит на третий и конечный шаги без проверки второго шага. Как это сделать, пожалуйста?Плагин проверки JQuery: невозможно проверить второй набор настроек мастера загрузки
У меня есть 1 функция для проверки для каждого шага мастера.
$(document).ready(function(){
/* Activate the tooltips */
$('[rel="tooltip"]').tooltip();
$('.wizard-card').bootstrapWizard({
'tabClass': 'nav nav-pills',
'nextSelector': '.btn-next',
'previousSelector': '.btn-previous',
onInit : function(tab, navigation, index){
//check number of tabs and fill the entire row
var $total = navigation.find('li').length;
$width = 100/$total;
$display_width = $(document).width();
if($display_width < 600 && $total > 3){
$width = 50;
}
navigation.find('li').css('width',$width + '%');
},
onNext: function(tab, navigation, index){
if(index == 1){
return validateFirstStep();
} else if(index == 2){
return validateSecondStep();
} else if(index == 3){
return validateThirdStep();
} //etc.
},
onTabClick : function(tab, navigation, index){
// Disable the posibility to click on tabs
return false;
},
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var wizard = navigation.closest('.wizard-card');
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$(wizard).find('.btn-next').hide();
$(wizard).find('.btn-finish').show();
} else {
$(wizard).find('.btn-next').show();
$(wizard).find('.btn-finish').hide();
}
}
});
// Prepare the preview for profile picture
$("#wizard-picture").change(function(){
readURL(this);
});
$('[data-toggle="wizard-radio"]').click(function(){
wizard = $(this).closest('.wizard-card');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
});
$('[data-toggle="wizard-checkbox"]').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).find('[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('active');
$(this).find('[type="checkbox"]').attr('checked','true');
}
});
$height = $(document).height();
$('.set-full-height').css('height',$height);
});
function validateFirstStep(){
$(".wizard-card form").validate({
\t \t rules: {
\t \t \t firstname: "required",
\t \t \t lastname: "required",
\t \t \t email: {
\t \t \t \t required: true,
\t \t \t \t email: true
\t \t \t }
\t \t },
\t \t messages: {
\t \t \t firstname: "Please enter your First Name",
\t \t \t lastname: "Please enter your Last Name",
\t \t \t email: "Please enter a valid email address",
\t \t }
\t });
\t
\t if(!$(".wizard-card form").valid()){
\t //form is invalid
\t return false;
\t }
\t
\t return true;
}
function validateSecondStep(){
//code here for second step
$(".wizard-card form").validate({
\t \t rules: {
matri: "required"
\t \t },
\t \t messages: {
matri: "Matricule required"
\t \t }
\t });
\t
\t if(!$(".wizard-card form").valid()){
\t console.log('invalid');
\t return false;
\t }
\t return true;
}