I have a page with multiple tabs and input fields within the tabs. When a user clicks the continue button and the input field is blank I want to prevent them from moving to the next tab. I have tried preventDefault(); and return false; and neither seemed to be working for me.
Here is my code, any help with what I am doing wrong is appreciated!
$('.btn-next').click(function (event) {
var businessNameInput = $.trim($('#businessName').val());
if (businessNameInput === '') {
event.preventDefault();
console.log('Oops, looks like something is missing!');
} else {
console.log("Yay, we're good to go!");
}
});
The console logs work for each option (input blank or not) but it still moves to the next tab.
I am using Fuel UX Wizard for the tabs and Next and previous button. I took a look at their code and pulled this out, I think it is their next button function...
var Wizard = function( element, options ) {
var kids;
this.$element = $( element );
this.options = $.extend( {}, $.fn.wizard.defaults, options );
this.options.disablePreviousStep = ( this.$element.attr( 'data-restrict' ) === "previous" ) ? true : this.options.disablePreviousStep;
this.currentStep = this.options.selectedItem.step;
this.numSteps = this.$element.find( '.steps li' ).length;
this.$prevBtn = this.$element.find( 'button.btn-prev' );
this.$nextBtn = this.$element.find( 'button.btn-next' );
kids = this.$nextBtn.children().detach();
this.nextText = $.trim( this.$nextBtn.text() );
this.$nextBtn.append( kids );
// handle events
this.$prevBtn.on( 'click.fu.wizard', $.proxy( this.previous, this ) );
this.$nextBtn.on( 'click.fu.wizard', $.proxy( this.next, this ) );
this.$element.on( 'click.fu.wizard', 'li.complete', $.proxy( this.stepclicked, this ) );
this.selectedItem( this.options.selectedItem );
if ( this.options.disablePreviousStep ) {
this.$prevBtn.attr( 'disabled', true );
this.$element.find( '.steps' ).addClass( 'previous-disabled' );
}
};
Aucun commentaire:
Enregistrer un commentaire