如果输入字段为空，则阻止移动到下一个选项卡

Question

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

这是我的代码，感谢您对我做错的任何帮助！

$('.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 Wizard 作为选项卡以及下一个和上一个按钮。我看了一下他们的代码，把它拉出来，我认为这是他们的下一个按钮功能......

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>

希望这会有所帮助...

Answer 2

使用.stopImmediatePropagation() 代替.preventDefault()：

event.stopImmediatePropagation();

关注官方文档：http://api.jquery.com/event.stopImmediatePropagation/

重大更新：

抱歉，一开始沉默了很久。我深入探讨了您的问题，发现 Wizard 具有内置事件 actionclicked.fu.wizard (http://getfuelux.com/javascript.html#wizard-usage-events)，可以轻松拦截步进变化。

该事件的处理程序是调用event.preventDefault 以停止在向导中更改步骤的唯一正确位置。

我创建了一个简单的示例，您必须选中必填复选框才能进入下一步：http://jsfiddle.net/go3koktm/