semantic-ui - 向表单验证添加错误不起作用？

Question

根据有关表单验证的语义 UI 文档，我可以手动添加错误：

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

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

我尝试了以下代码：

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

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

任何想法？

Answer 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 问题页面有一个重要的讨论。作者提到：

...文档模棱两可，但验证+设置像$(".form').form(rules, settings);

Answer 2

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

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

Answer 3

使用语义 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'
                    }
                ]
            }
        });
    });

我希望这有助于澄清问题。

Answer 4

MVC5：尝试在视图的最下部添加这个

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