向表单验证添加错误不起作用？答案

【问题标题】：Adding errors to form validation doesn't work?向表单验证添加错误不起作用？
【发布时间】：2014-07-18 16:24:30
【问题描述】：

根据Semantic UI docs on form validation，我可以手动添加错误：

添加错误（错误）|给定数组错误，向表单添加错误

（我想使用此功能，因为我通过 AJAX 提交表单，进行服务器端验证，然后想显示结果。）

我尝试了以下代码：

$('#my-form').form("add errors", [ 'error' ]);
$('#my-form').form("validate form");

调用上述方法时，我从控制台得到了这个矛盾的输出，而表单在显然不应该成功时验证为成功。

有什么想法吗？

【问题讨论】：

你能说得更清楚些吗？该文档似乎具有误导性（或至少不完整）。我没有看到自定义错误的示例用例，也没有手动重新验证，谷歌也没有多大帮助。根据我对文档的理解，我发布的两行至少应该在我放置在表单中的ui message div 中显示error。

标签： semantic-ui

【解决方案1】：

要通过 AJAX 执行服务器端验证，请使用自定义规则：

$myForm = $('.ui.form');
var settings = {
    rules: {
        custom: function () {
            // Perform AJAX validation here
            return false;
        }
    }
};
var rules = {
    ajaxField: {
        identifier: 'ajaxField',
        rules: [{
            type: 'custom',
            prompt: 'Custom error!'
        }]
    }
};
$myForm.form(rules, settings);

它正在运行：http://jsbin.com/sufiwafe/1/edit

关于一般如何使用回调和表单验证，在 GitHub 上的Semantic-UI issues 页面上有一个重要的讨论。作者提到：

... 文档不明确，但验证 + 设置已通过喜欢$(".form').form(rules, settings);

【讨论】：

【解决方案2】：

在使用语义 ui 时，您似乎正在尝试重新创建轮子。假设您在 head 中包含了 semantic.css 的完整版本，并且在 body 结束标记上方包含了 semantic.js，这里是一个简单联系表单的工作代码的缩写版本，其中一些错误工作由语义完成，一些由html5。为了完整起见，我已经包含了一个用户端验证码。 HTML

<form class="ui form" name="contact_sdta" action="" method="post">
    <div class="field">
        <label>Your Email </label>
        <div class="ui left labeled icon input">
            <input name="email" id="email" placeholder="name@mail.com" type="email">
            <i class="mail icon"></i>
            <div class="ui corner label">
                <i class="asterisk  red icon"></i>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Subject</label>
        <div class="ui left labeled icon input">
            <input name="subject" id="subject" placeholder="I am interested in more information about" type="text">
            <i class="text file outline icon"></i>
            <div class="ui corner label">
                <i class="asterisk red icon"></i>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Message</label>
        <div class="ui left labeled icon input">
            <textarea name="message"></textarea>
            <i class="text file outline icon"></i>
            <div class="ui corner label">
                <i class="asterisk red icon"></i>
            </div>
        </div>
    </div>
    <div class="ui buttons">
        <input type="reset" value="Cancel" class="ui button">
        <div class="or"></div>
        <input type="submit" value="Submit" class="ui blue submit button">
    </div>
    <div class="ui error message"></div>
</form>

mainjs

    $(function(){
 $('form input[type=reset]')
            .before('<div>Are you a human? <input type="checkbox" name="captcha" /><i class="asterisk red icon"></i></div><br />');
        $('.ui.form').form({
            email: {
                identifier: 'email',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter your email'
                    }
                ]
            },
            subject: {
                identifier: 'subject',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter a subject'
                    }
                ]
            },
            message: {
                identifier: 'message',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter a message'
                    }
                ]
            },
            human: {
                identifier: 'captcha',
                rules: [
                    {
                        type: 'checked',
                        prompt: 'You must behuman'
                    }
                ]
            }
        });
    });

我希望这有助于解决问题。

【讨论】：

【解决方案3】：

开发者确认这是 GitHub 上的一个错误：

https://github.com/Semantic-Org/Semantic-UI/issues/959

【讨论】：

【解决方案4】：

MVC5：尝试将其添加到视图的最下方

@section 脚本 { @Scripts.Render("~/bundles/jqueryval") }

【讨论】：