jquery - 如果输入字段为空，则防止移至下一个选项卡

Question

我有一个页面，其中包含多个选项卡和选项卡内的输入字段。当用户单击“继续”按钮并且输入字段为空时，我想阻止他们移动到下一个选项卡。我尝试过preventDefault();并返回 false；但似乎两者都不适合我。

这是我的代码，感谢任何对我做错的事情的帮助!

$('.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!");
        }
    });

控制台日志适用于每个选项(输入空白或不输入)，但仍会移动到下一个选项卡。

我正在使用 Fuel UX 向导来显示选项卡以及“下一个”和“上一个”按钮。我看了一下他们的代码并将其拉出来，我认为这是他们的下一个按钮功能......

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' );
            }
        };

以下是 FuelUX 向导中完整 JS 文件的链接:www.fuelcdn.com/fuelux/3.0.2/js/fuelux.js

Answer 1

我认为您错过了就绪功能。这是示例代码:

 <script src="jquery.min.js"></script>
 <script>
 $(document).ready(function()
 {
  $('.btn-next').click(function (event) {
  var businessNameInput = $.trim($('#businessName').val());
  if (businessNameInput === '') {
        console.log('Oops, looks like something is missing!');
        return false;
   } else {
  console.log("Yay, we're good to go!");
  return true;
    }
});
});
</script>

 <form action="YourFileName">
 Enter Business Name:<input type="text" id="businessName">
 <input type="submit" class="btn-next">
 </form>

希望这有帮助...