1
Ich habe einen jquery step wizard (3 Schritte), in dem ein Formular existiert. Wenn ich zum nächsten Schritt übergehe, versuche ich die Formularfelder des ersten Schrittes mit der valid() Methode zu validieren (es ist in Ordnung), aber wenn ich versuche, den zweiten Schritt zu validieren, validiere jQuery immer true. Es geht also zum dritten und letzten Schritt über, ohne den zweiten Schritt zu bestätigen. Wie geht es, bitte?JQuery-Validierungs-Plugin: Der zweite setp des Bootstrap-Assistenten konnte nicht validiert werden
Ich habe 1 Funktion zur Validierung für jeden Assistentenschritt.
$(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;
}