Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Проверка формы семантического пользовательского интерфейса - проверяйте определенные поля формы, только если значение не пусто

Автор вопроса: Karl ViiburgОтветов: 2

У меня есть форма, в которой есть обязательные поля, а также поля, которые не являются обязательными. Я использую поведение проверки формы Semantic UI для проверки полей.

Однако я хочу добиться того, чтобы поведение проверки формы проверяло только необязательные поля, когда в них есть значение.

Пример необязательного поля:

<div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="First name">
</div>

Пример обязательного поля:

<div class="required field">
    <label>E-mail address</label>
    <input type="text" name="email" placeholder="E-mail address">
</div>

Я попробовал, пропустив empty правило проверки, но это не сработало.

Есть ли что-то встроенное в поведение проверки формы, которое может помочь мне в этом, или мне нужно будет написать настраиваемую проверку для моих дополнительных полей?

validationjquerysemantic-ui

Ответы

Ответ 1 · рейтинг 5 · Karl Viiburg

Обновление: эта функция теперь реализована в версии 1.2.0. Можно использовать тот же флаг optional: https://semantic-ui.com/behaviors/form.html#optional-fields

Предыдущий ответ и решение для Semantic версии ‹1.2.0:

Мне удалось разработать рабочее решение для необязательных полей, расширив поведение проверки формы Semantic UI.

Сначала я добавил флаг optional к каждому набору правил. Это может быть установлено либо true, либо false:

firstname: {
    identifier: "first_name",
    optional: true,
    rules: [
        {
            type: "regex[^[a-zA-Z -]+$]",
            prompt: "First name can only consist of letters, spaces and dashes"
        }
    ]
}

Затем я искал функцию, которая обрабатывает проверку для каждого поля, и расширил ее, добавив оператор if, чтобы проверить, установлен ли флаг optional на true и значение пусто. Если критерии верны, то проверка для пустого поля пропускается и возвращается как действительная.

Функцию можно найти около 4600 строчки в несжатом semantic.js или поискать комментарий функции:

// takes a validation object and returns whether field passes validation
field: function(field) {
    var
        $field      = module.get.field(field.identifier),
        fieldValid  = true,
        fieldErrors = []
    ;

    if(field.optional && $.trim($field.val()) == ""){
        module.debug("Field is optional and empty. Skipping", field.identifier);
        return true;
    }
    if(field.rules !== undefined) {
        $.each(field.rules, function(index, rule) {
            if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) {
                module.debug('Field is invalid', field.identifier, rule.type);
                fieldErrors.push(rule.prompt);
                fieldValid = false;
            }
        });
    }
    if(fieldValid) {
        module.remove.prompt(field, fieldErrors);
        $.proxy(settings.onValid, $field)();
    }
    else {
        formErrors = formErrors.concat(fieldErrors);
        module.add.prompt(field.identifier, fieldErrors);
        $.proxy(settings.onInvalid, $field)(fieldErrors);
        return false;
    }
    return true;
}

Ответ 2 · HackerGK

Для этого вы можете легко использовать плагин JQuery Validation. попробуйте это в

http://jqueryvalidation.org/

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы