Javascript 需要选项卡内的表单验证帮助

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

我让它工作，因此，如果你不填写字段，它将不允许你移动到下一个选项卡。但是，如果您未能验证并填写详细信息，则框将保持红色。我需要一些帮助，以便在您填写后清除查询框

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

---

只需在输入字段上触发keyUp事件以删除边框：）

如果您已经使用jQuery，是否不使用验证插件

有很多好的插件：

如果您使用引导，我建议：

试试这个：

基本上，添加了此js：

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

并使用css类：

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

当文本框焦点被移开时，这会删除边框。如果您需要在用户输入数据后立即执行此操作，请使用

keyup

而不是

focusout

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

.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();
        }
    });
});