Правило семантической формы интерфейса пользователя, только если выбрана опция - PullRequest
Новая
       9

Правило семантической формы интерфейса пользователя, только если выбрана опция

0 голосов
/ 28 февраля 2019

Я использую семантический пользовательский интерфейс и пытаюсь выполнить некоторую проверку формы с его помощью.

У меня есть сценарий: у пользователя есть 2 варианта: электронная почта или проверка телефонного приложения.Они выбирают один из вариантов и вводят все, что угодно, в текстовое поле, а затем нажимают кнопку «Отправить».

Однако я не уверен, как делать правила для этого с семантическим интерфейсом.

Я знаю, хотел ли япроверьте, не было ли оно пустым, я мог бы сделать что-то вроде этого: 

$('.ui.form')
  .form({
    fields: {
      CODE: {
        identifier: 'code',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter your verification code'
          }
        ]
      }  
    } } );

Однако я хотел бы получить дополнительные правила, основанные на том, какая опция выбрана.У меня есть JavaScript, который в настоящее время говорит мне значение того, что выбрано, и обновляется при изменении.Хотя не знаете, как добавить его в правила, чтобы я мог быть похожим - если выбран телефон, должно быть ровно 6 символов или если выбрано электронное письмо, должно быть 18 символов (разные длины для разных вариантов).

Есть ли способ иметь такие условные правила?Шкаф, который я мог найти, был: 

depends: 'id'

Какие проверки, чтобы убедиться, что он не пустой.

Кто-нибудь знает, как иметь условные правила, такие как это, основанные на другом элементе формы?Я использую самую последнюю версию Semantic-UI

1 Ответ

0 голосов
/ 28 февраля 2019

Вы можете сделать это, добавив пользовательские правила . 

$.fn.form.settings.rules.atLeastOne = function (value, fields) {
    fieldsToCompare = fields.split(",")
    if (value) {
        // current input is not empty
        return true
    } else {
        // check the other input field(s)
        // atLeastOne is not empty
        atLeastOne = false
        for (i = 0; i < fieldsToCompare.length; i++) {
            // gets input based on id
            if ($("#" + fieldsToCompare[i]).val()) {
                atLeastOne = true
            }
        }
        return atLeastOne
    }
}

$(".ui.form").form({
    fields: {
        number:{
            identifier: "number",
            rules: [{
                type: "exactLength[6]",
                prompt: "number has to be 6 chars long"
            }, {
                // include the input fields to check atLeastOne[email, address, ...]
                type: "atLeastOne[email]",
                prompt: "Please provide an email or a number"
            }]
        },
        email: {
            identifier: "email",
            rules: [{
                type: "exactLength[18]",
                prompt: "email has to be 18 chars long"
            }, {
                type: "atLeastOne[number]",
                prompt: "Please provide an email or a number"
            }]
        }
    }
});

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

...