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>

希望这会有所帮助......

Answer 2

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

event.stopImmediatePropagation();

按照官方文档：http://api.jquery.com/event.stopImmediatePropagation/

大更新：

对不起，首先要保持沉默。我深入探讨了你的问题并发现向导有内置事件actionclicked.fu.wizard（http://getfuelux.com/javascript.html#wizard-usage-events），可以轻松拦截步骤变换。

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

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

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

2 个答案: