语义 UI 表单验证不会实时更新答案

【问题标题】：Semantic UI form validation doesn't update on real time语义 UI 表单验证不会实时更新
【发布时间】：2016-08-30 17:19:55
【问题描述】：

所以我有这个语义 UI 标准形式：

<form id="signup-form" class="ui form" method="post">
    <div class="field">
        <label>name</label>
        <input type="text" name="fullname" id="fullname">
    </div>
    <div class="field">
        <label>username</label>
        <input type="text" name="username" id="username">
    </div>
    <div class="field">
        <label>email</label>
        <input type="email" name="email" id="email">
    </div>
    <div class="two fields">
        <div class="field">
            <label>password</label>
            <input type="password" name="password" id="password">
        </div>
        <div class="field">
            <label>password repeat</label>
            <input type="password" name="password-repeat" id="password-repeat">
        </div>
    </div>
    <div class="field">
        <div class="ui checkbox">
            <input type="checkbox" name="terms" id="terms" tabindex="0" class="hidden">
            <label>I accept the terms and conditions</label>
        </div>
    </div>
    <button type="submit" value="signup" class="ui blue submit button pull-left">Sign Up</button>
    <div class="ui error message"></div>
</form>

这是我使用的验证脚本：

<script>
$('#signup-form').form({
    fields: {
        fullname: {
            identifier: 'fullname',
            rules: [
                {
                    type: 'empty',
                    prompt: 'can not be empty'
                }
            ]
        },
        username: {
            identifier: 'username',
            rules: [
                {
                    type: 'empty',
                    prompt: 'can not be empty'
                }
            ]
        },
        email: {
            identifier: 'email',
            rules: [
                {
                    type: 'email',
                    prompt: 'can not be empty'
                }
            ]
        },
        password: {
            identifier: 'password',
            rules: [
                {
                    type: 'empty',
                    prompt: 'can not be empty'
                },
                {
                    //type: 'regExp[/^[a-z0-9_-]{6,16}$/]',
                    type: 'regExp[/^[a-zA-Z0-9_]{6,16}$/]',
                    prompt: 'not valid'
                }
            ]
        },
        password_repeat: {
            identifier: 'password-repeat',
            rules: [
                {
                    type: 'match[password]',
                    prompt: 'must match the password'
                }
            ]
        },
        terms: {
            identifier: 'terms',
            rules: [
                {
                    type: 'checked',
                    prompt: 'must accept the rules'
                }
            ]
        }
    }
});
</script>

一切都按预期进行，但只有一件事。用户点击提交按钮后，语义 ui 会根据验证规则检查表单，如果成功，它将允许提交表单，但如果没有，则会显示错误消息并 HIDES 提交按钮。之后，即使用户修复了表单的值，它仍然会在表单底部显示错误，并且提交按钮 STILL 隐藏。使用回车键提交表单是可行的，但这不是一种很明显的方式。

如何确保 Semantic UI 在表单修复后再次显示提交按钮？？

【问题讨论】：

标签： javascript html forms validation semantic-ui

【解决方案1】：

事实证明它实际上并没有隐藏它。它只是重叠它。按钮修复问题后，一个简单的引导程序，如clearfix div。

<button type="submit" value="signup" class="ui blue submit button pull-left">Sign Up</button>
<div class="clearfix"></div>

clearfix 在哪里：

.clearfix,
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
    content: " ";
    display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
    clear: both;
}

【讨论】：