Question

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

添加错误（错误）|在给定数组错误的情况下，向表单添加错误

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

我尝试了以下代码：

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

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

enter image description here

有什么想法吗？

Answer 1

在使用语义ui时，您似乎正在尝试重新创建轮子。假设你已经在head和semantic.js中包含了semantic.css的完整版本，就在正文结束标记之上，这里是一个简单联系表单的工作代码的缩写版本，其中一些错误工作由语义完成，一些由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 2

要通过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);

Answer 3

开发人员证实这是GitHub上的一个错误：

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

Answer 4

MVC5：尝试在视图的最下方添加此内容

@section Scripts {       @ Scripts.Render（＆＃34;〜/ bundles / jqueryval＆＃34;）}

添加错误以进行表单验证不起作用？

4 个答案: