Question

到目前为止，请查看我的表单的工作演示：Demo Fiddle

我有它工作，所以如果你没有填写字段，它将不允许你移动到下一个选项卡。但是，如果您无法验证然后填写详细信息，则框保持红色。填好后，我需要一些清理查询框的帮助。

jQuery(document).ready(function($) {
    var currentTab;
    $(".tabs-menu a, .tab-content .next").click(function(event) {
        event.preventDefault();
        var $this = $(this),
            requiredAreFilled = true,
            tab = $this.attr("href") || $this.data('next'),
            currentTab = $('.tabs-menu .current').children('a').attr('href');
        $(currentTab).find('.required').each(function(index, elt) {
            if ($(elt).val() === '') {
                requiredAreFilled = false;
                $(elt).css('border', '2px solid #FB8183'); // This is bad, should be a class
            }

        });
        var tabLink = $this.is('a') ? $this.parent() : $('.' + tab.substring(1)),
            $tabLink = $(tabLink);
        console.log($tabLink);
        if (requiredAreFilled) {
            $tabLink.addClass("current")
                .siblings().removeClass("current");
            $(".tab-content").not(tab).hide();
            $(tab).fadeIn();
        }
    });
});

Answer 1

只需触发输入字段上的keyUp事件即可删除边框：）

$('input[type="text"]').keyup(function() {
  //remove the border
});

如果你已经使用过jQuery，那么你不使用验证插件吗？

那里有很多好的插件： http://formvalidator.net/

如果您使用Bootstrap，我建议：http://bootstrapvalidator.com/

Answer 2

试试这个：DEMO focusout，DEMO keyup

基本上添加了这个js：

    $(".tab-content").on("focusout",".invalidInput",function() {
        if($.trim($(this).val()).length>0)
            $(this).removeClass("invalidInput");
    });

并使用了css类：

.invalidInput{
    border : 2px solid #FB8183;
}

当文本框焦点被删除时，这将删除边框，如果您需要在用户输入数据时立即执行此操作，请使用keyup代替focusout

Answer 3

Your JSFiddle repaired

.required-error { /* new class */
    border: 2px solid #FB8183;
}

jQuery(document).ready(function ($) {
    var currentTab;
    $(".tabs-menu a, .tab-content .next").click(function (event) {
        event.preventDefault();
        var $this = $(this),
            requiredAreFilled = true,
            tab = $this.attr("href") || $this.data('next'),
            currentTab = $('.tabs-menu .current').children('a').attr('href');
        $(currentTab).find('.required').each(function (index, elt) {
            if ($(elt).val() === '') {
                requiredAreFilled = false;
                $(elt).addClass('required-error'); // This is bad, should be a class
            } else {
                /* this will fix the "corrected" inputs */
                $(elt).removeClass('required-error');
            }
        });
        var tabLink = $this.is('a') ? $this.parent() : $('.' + tab.substring(1)),
            $tabLink = $(tabLink);
        console.log($tabLink);
        if (requiredAreFilled) {
            $tabLink.addClass("current")
                .siblings().removeClass("current");
            $(".tab-content").not(tab).hide();
            $(tab).fadeIn();
        }
    });
});

需要在标签内进行表单验证

3 个答案: