Question

所以我有这种语义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 提交按钮。在此之后，即使用户修复了表单的值，它仍然会在表单底部显示错误，并且提交按钮仍然隐藏。使用回车键提交表单有效，但这不是一个非常明显的方式。

如何确保语法界面在修复表单后再次显示提交按钮？

Answer 1

事实证明它并没有真正隐藏它。它只是重叠它。按钮后面的clearfix div之类的简单Bootstrap可以解决问题。

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

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

1 个答案: