Как мне отправить подтвержденную форму в реальном времени с помощью Semantic UI и Meteor?

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

HTML:

<form class="ui form pin-form">                     
  <div class="field">
    <label>Email</label>
    <input placeholder="[email protected]" name="email_input" type="text">
  </div>
  <div class="ui buttons">
    <input type="submit" class="ui submit positive disabled button login-button" value="Log in">
  </div>
</form>

Я сам добавил тег <form> и превратил отправку в input, чтобы получить доступ к обычному submit form.

Проверка в реальном времени осуществляется из Semantic UI и пакета Meteor: https://github.com/avrora/live-form-validator

На рендере шаблона я делаю следующее:

if (!this._rendered) {
this._rendered = true;
pinForm = $('.ui.form.pin-form');
pinForm.form({
    my_text_input: {
      identifier: 'email_input',
      rules: [
        {
          type: 'empty',
          prompt: 'Type your email address'
        },
        {
          type: 'email',
          prompt: 'This is not yet a valid email address'
        }
      ]
    }
  },
  {
    inline: true,
    on: 'blur',
    transition: 'slide down',
    onSuccess: function () {
      var submitButton = $('.ui.submit.button')
                submitButton.removeClass('disabled')
                return false
    },
            onFailure: function() {
                var submitButton = $('.ui.submit.button')
                submitButton.addClass('disabled')
            }
    })
}

Большая проблема здесь в том, что с return false он вообще не отправляет форму, даже когда нажимает кнопку отправки, а без нее он отправляет форму в реальном времени, чего я не хочу!

Может ли кто-нибудь увидеть обходной путь или мне нужно как-то переключить проверку?


javascript validation forms meteor semantic-ui
person Yeats    schedule 08.06.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите сделать Meteor.call, вы можете попробовать сделать это в функции onSuccess. Пакет действительно просит вас сохранить данные вручную в функции onSuccess.

Следующий код дважды зарегистрировал электронное письмо.

onSuccess: function () {
    console.log("Email: ", $("input[name=email_input]").val());
    // Submit your form here using a Meteor.call maybe?
    return false;
},

Вы также можете посмотреть aldeed: autoform для обработки форм в Meteor.

person kaoskeya    schedule 08.06.2015
comment
У меня вообще не работает метеорпад, кнопки остаются серыми. Проблема в том, что я не хочу отправлять форму в реальном времени, только вручную отправляя форму! - person Yeats; 08.06.2015
comment
Попробуйте нажать «Enter» после заполнения электронного письма, у меня это сработало. Я не понимаю, что вы подразумеваете под отправкой формы в режиме реального времени. Когда вы вводите логику отправки формы в onSuccess, вы отправляете ее только тогда, когда форма проверяется. Если вы хотите проверить что-то еще, вы можете добавить эту логику туда - person kaoskeya; 08.06.2015
comment
Совершенно верно, но это подтверждается в реальном времени! Фактически, после каждого нажатия клавиши. - person Yeats; 08.06.2015
comment
Документация пакета тоже кажется довольно ограниченной. Никаких проблем, никаких обновлений ... Вы должны полностью проверить автоформу. - person kaoskeya; 08.06.2015
comment
Да, к сожалению, это был единственный пакет, который я смог найти, обеспечивающий проверку в реальном времени. Автоформа не работает. :( - person Yeats; 08.06.2015
comment
Вы можете попробовать добавить еще одну кнопку без отправки, скрыть / показать ее соответствующим образом, используя onSuccess, onFailure, и этот прослушиватель нажатия кнопки может выполнить вашу логику отправки? - person kaoskeya; 08.06.2015

arrow_upward
0
arrow_downward

Это может быть самый глупый вопрос по всему SO. (Не волнуйтесь, я задал вопрос, поэтому я только оскорбляю себя!)

Семантический пользовательский интерфейс буквально предоставляет параметр on: change, который будет проверять форму в реальном времени, а не on: blur, который установлен сейчас.

О чувак...

person Yeats    schedule 09.06.2015