Envoyez une demande AJAX uniquement si la validation du formulaire a réussi dans Polymer - javascript, formulaires, validation, polymer, polymer-1.0

J'utilise Polymer 1.0 iron-form pour obtenir les entrées de l'utilisateur et envoyer une requête AJAX au serveur avec 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>

où Polymer.dom(event).localTarget.parentElement.submit(); est utilisé pour valider le formulaire pour la saisie requise.

Donc, ce que je cherche à faire est d’envoyer une demande AJAX uniquement si la validation du formulaire a réussi, mais à ce stade, même si le formulaire affiche des erreurs, il continue à traiter la demande AJAX.

J'ai probablement besoin de mettre la validation et la demande AJAX dans deux appels différents, mais je suis un peu coincé.

Réponses:

Je ne pense pas Polymer.dom(event).localTarget.parentElement.submit(); exécute n'importe quelle validation, qui soumet littéralement le formulaire. Voir ici.

La méthode que vous devriez utiliser, comme indiqué dans ce lien, est .validate(). Cela renverra un booléen, ce qui signifie que vous pourrez alors envelopper l'appel de connexion réel dans un fichier. if déclaration:

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