Добавление ошибок для проверки формы не работает?

Согласно документам Semantic UI по проверке формы, я могу добавлять ошибки вручную:

добавить ошибки(ошибки) | Добавляет ошибки в форму, учитывая ошибки массива

(Я хочу использовать эту функцию, потому что я отправляю форму через AJAX, выполняю проверку на стороне сервера, а затем хочу отобразить результаты.)

Я попробовал следующий код:

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

Я получаю этот противоречивый вывод из консоли при вызове вышеуказанных методов, и форма подтверждается как успешная, хотя, очевидно, этого не должно быть.

введите здесь описание изображения

Есть идеи?


semantic-ui
person Lazlo    schedule 18.07.2014    source источник
comment
Не могли бы вы быть более явным? Документация кажется вводящей в заблуждение (или, по крайней мере, неполной). Я не вижу примера использования ни пользовательских ошибок, ни ручной повторной проверки, и Google мало чем помогает. Насколько я понимаю документы, две строки, которые я разместил, должны как минимум отображать error в div ui message, который я разместил в форме.   -  person Lazlo    schedule 18.07.2014

Ответы (4)


arrow_upward
2
arrow_downward

Чтобы выполнить проверку на стороне сервера через 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

О том, как использовать обратные вызовы и проверку формы в целом, есть важная дискуссия на Semantic Страница проблем пользовательского интерфейса на GitHub. Автор упоминает:

... документация была неоднозначной, но проверка + настройки проходят как $(".form').form(rules, settings);

person Ed I    schedule 06.08.2014

arrow_upward
1
arrow_downward

Похоже, вы пытаетесь воссоздать колесо при использовании семантического пользовательского интерфейса. Предполагая, что вы включили полные версии semantic.css в заголовок и semantic.js чуть выше закрывающего тега body, вот сокращенная версия рабочего кода для простой контактной формы с частью работы над ошибками, выполненной семантикой, и частью 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="[email protected]" 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>

основные

    $(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'
                    }
                ]
            }
        });
    });

Надеюсь, это поможет прояснить ситуацию.

person wriver4    schedule 05.08.2014

arrow_upward
1
arrow_downward

Разработчик подтвердил, что это ошибка на GitHub:

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

person Lazlo    schedule 07.08.2014

arrow_upward
-1
arrow_downward

MVC5: попробуйте добавить это в самую нижнюю часть вашего представления.

@section Скрипты { @Scripts.Render("~/bundles/jqueryval") }

person ronIT    schedule 06.04.2015