Надсилати AJAX-запит, лише якщо успішна перевірка форми Polymer - javascript, forms, validation, polymer, polymer-1.0

Я використовую форму заліза Polymer 1.0, щоб отримати введення користувача та надіслати запит AJAX на сервер за допомогою iron-ajax:

     <form is="iron-form" id="form" >
<paper-input name="userEmail" label="Email" required></paper-input>
<paper-input name="password" type="password" label="Password" required></paper-input>
<br>
<paper-button raised
on-click="login">Submit</paper-button>
</form>

<script>
(function() {
Polymer({
is: "module-login",
login: function() {
// this is used to trigger Polymer"s form validation
Polymer.dom(event).localTarget.parentElement.submit();

// this is my ajax request
this.$.auth.login(this.$.userEmail.value, this.$.password.value);
}
});
})();
</script>

де Polymer.dom(event).localTarget.parentElement.submit(); використовується для перевірки форми для необхідного введення.

Тому я намагаюся досягти - надсилати запит AJAX лише в тому випадку, якщо перевірка форми була успішною, але в цей момент, навіть якщо форма покаже помилки, вона все одно перейде до запиту AJAX.

Мені, мабуть, потрібно поставити валідацію та фактичний запит AJAX у два різні виклики, але я трохи застряг.

Відповіді:

Я не думаю Polymer.dom(event).localTarget.parentElement.submit(); виконує будь-яку перевірку, яка буквально просто подає форму. Подивитися тут.

Фактичний метод, який ви повинні використовувати, як видно з цього посилання, це .validate(). Це поверне булеве значення, тобто ви зможете згортати фактичний виклик для входу в if заява:

if ( Polymer.dom(event).localTarget.parentElement.validate() ) {
this.$.auth.login(this.$.userEmail.value, this.$.password.value);
}