mercredi 6 mai 2015

Prevent Moving to Next Tab If Input Field Is Empty

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