Feldvalidierung onBlur mit Aurelia

Question

Ich benutze Aurelia und Typoskript, um eine Webseite zu erstellen. Ich habe ein einfaches Anmeldeformular und möchte die Benutzer-E-Mail und das Passwort bestätigen.

Ich benutze Aurelia Validierung und standardmäßig überprüft es den Inhalt meiner Eingabe jedes Mal, wenn es ändert, was lästig sein kann. (Bsp .: eine Fehlermeldung erhalten, dass die E-Mail nicht gültig ist, wenn Sie es noch nicht einmal getan haben). Also möchte ich stattdessen die Validierung onBlur durchführen (wenn der Fokus auf der Eingabe verloren geht) und wenn der Benutzer auf die Login-Schaltfläche klickt.

Hier ist mein Code:

login.html

<template> 
<section> 
    <div class="container col-lg-12"> 
     <div class="col-md-4 col-md-offset-4 centered"> 
      <h2 t="signin_sign_in"></h2> 
      <form role="form" submit.delegate="login()" validate.bind="validation"> 
       <br if.bind="errors" /> 
       <div if.bind="errors" repeat.for="error of errors" class="alert alert-danger"> 
        <h4 repeat.for="message of error">${message}</h4> 
       </div> 
       <div class="form-group"> 
        <label class="control-label" t="signin_email_address"></label> 
        <input type="text" class="form-control" value.bind="email"> 
       </div> 
       <div class="form-group"> 
        <label class="control-label" t="signin_password"></label> 
        <input type="password" class="form-control" value.bind="password"> 
       </div> 
       <button type="submit" class="btn btn-primary" t="signin_sign_in"></button> 
      </form> 
     </div> 
    </div> 
</section> 
</template> 

login.ts

@autoinject() 
export class Login { 
    email: string; 
    password: string; 
    router: Router; 
    application: ApplicationState; 
    accountService: AccountService; 
    errors; 
    validation; 
    i18n: I18N; 

constructor(router: Router, application: ApplicationState, accountService: AccountService, validation: Validation, i18n: I18N) { 
    this.router = router; 
    this.application = application; 
    this.accountService = accountService; 
    this.i18n = i18n; 
    this.errors = []; 

    this.validation = validation.on(this) 
     .ensure('email') 
      .isNotEmpty() 
      .isEmail() 
     .ensure('password') 
      .isNotEmpty() 
      .hasLengthBetween(8, 100); 
} 

navigateToHome(): void { 
    this.router.navigate("/welcome"); 
} 

login(): void { 
    var __this = this; 
    this.validation.validate() 
     .then(() => this.accountService.signin(this.email, this.password, this.rememberMe) 
      .then(result => { 
       // Do stuff 
      }) 
      .catch(error => { 
       // Handle error 
       } 
      })); 
} 
} 

Mein erster Gedanke

& updateTrigger:'blur':'paste' 

hinzuzufügen war

zu meiner Bindung im HTML, aber es funktioniert nicht. Die Bindung wird korrekt aktualisiert, wenn der Fokus verloren geht, die Validierung jedoch nicht mehr funktioniert. Es gibt auch keinen Fehler in der Chrome-Debug-Konsole.

Irgendeine Idee, wie man das macht? Ist das überhaupt möglich?

Answer 1

Es gibt verschiedene Bindungsverhalten, mit denen Sie feststellen können, wann die Validierung ausgelöst werden soll. Sie können mehr über sie in der Aurelia docs on validation (unter dem Abschnitt Validate Binding Behavior) lesen.

Aus der Dokumentation;

Das Validate-Bindungsverhalten der zugehörigen Steuerung des gehorcht validateTrigger (Unschärfe, Veränderung, changeOrBlur, manuell). Wenn Sie möchten, zu einen anderen validateTrigger in einer bestimmten Bindungs ​​Verwendung Verwenden Sie eine des folgende Bindungsverhaltens anstelle von & validate:

& validateOnBlur: das DOM Unschärfe Ereignis auslöst Validierung.
& validateOnChange: Dateneingabe, die das Modell ändert, löst die Validierung aus.
& validateOnChangeOrBlur: DOM-Unschärfe oder Dateneingabe löst Validierung aus.
& validateManuell: Die Bindung wird nicht automatisch validiert, wenn das zugehörige Element unscharf ist oder vom Benutzer geändert wurde.