Wysyłaj zapytanie AJAX tylko wtedy, gdy pomyślne jest sprawdzenie formularza w Polymer - javascript, formularze, walidacja, polimer, polimer-1.0

Korzystam z żelaznego formularza Polymer 1.0, aby uzyskać dane wejściowe od użytkownika i wysłać żądanie AJAX do serwera za pomocą 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>

gdzie Polymer.dom(event).localTarget.parentElement.submit(); służy do sprawdzania poprawności formularza pod kątem wymaganych danych wejściowych.

Tak więc staram się wysłać żądanie AJAX tylko wtedy, gdy sprawdzanie poprawności formularza zakończyło się powodzeniem, ale w tym momencie nawet jeśli formularz wyświetli błędy, nadal przejdzie do żądania AJAX.

Prawdopodobnie muszę umieścić sprawdzanie poprawności i rzeczywiste żądanie AJAX w dwóch różnych wywołaniach, ale utknąłem trochę.

Odpowiedzi:

Nie sądzę Polymer.dom(event).localTarget.parentElement.submit(); uruchamia sprawdzanie poprawności, które dosłownie przesyła formularz. Widzieć tutaj.

Rzeczywistą metodą, której powinieneś użyć, jak widać w tym łączu, jest .validate(). Zwróci to wartość logiczną, co oznacza, że ​​możesz zawinąć rzeczywiste wywołanie logowania w if komunikat:

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