2016-04-28 15 views
6

Ich versuche derzeit, eine Validierung zu einem Formular hinzuzufügen, das mit Material-Ui-Komponenten erstellt wurde. Ich habe es funktioniert, aber das Problem ist, dass die Validierungsfunktion derzeit bei jeder Statusänderung in der Eingabe aufgerufen wird (d. H. Jeder Buchstabe, der eingegeben wird). Ich möchte jedoch nur dann meine Validierung durchführen, wenn die Eingabe beendet wurde.Formularüberprüfung mit react und material-ui

meinen aktuellen Code Gegeben:

class Form extends React.Component { 

    state = {open: false, email: '', password: '', email_error_text: null, password_error_text: null, disabled: true}; 

    handleTouchTap() { 
     this.setState({ 
      open: true, 
     }); 
    } 

    isDisabled() { 
     let emailIsValid = false; 
     let passwordIsValid = false; 

     if (this.state.email === "") { 
      this.setState({ 
       email_error_text: null 
      }); 
     } else { 
      if (validateEmail(this.state.email)) { 
       emailIsValid = true 
       this.setState({ 
        email_error_text: null 
       }); 
      } else { 
       this.setState({ 
        email_error_text: "Sorry, this is not a valid email" 
       }); 
      } 
     } 

     if (this.state.password === "" || !this.state.password) { 
      this.setState({ 
       password_error_text: null 
      }); 
     } else { 
      if (this.state.password.length >= 6) { 
       passwordIsValid = true; 
       this.setState({ 
        password_error_text: null 
       }); 
      } else { 
       this.setState({ 
        password_error_text: "Your password must be at least 6 characters" 
       }); 
      } 
     } 

     if (emailIsValid && passwordIsValid) { 
      this.setState({ 
       disabled: false 
      }); 
     } 
    } 

    changeValue(e, type) { 
     const value = e.target.value; 
     const nextState = {}; 
     nextState[type] = value; 
     this.setState(nextState,() => { 
      this.isDisabled() 
     }); 
    } 

    login() { 
     createUser(this.state.email, this.state.password); 
     this.setState({ 
      open: false 
     }); 
    } 

    render() { 

     let {open, email, password, email_error_text, password_error_text, disabled} = this.state; 

     const standardActions = (
      <FlatButton 
       containerElement={<Link to="/portal" />} 
       disabled={this.state.disabled} 
       label="Submit" 
       onClick={this.login.bind(this)} 
      /> 
     ); 

     return (
      <div style={styles.container}> 
       <Dialog 
        open={this.state.open} 
        title="Enter Your Details to Login" 
        actions={standardActions} 
       > 
        <span className="hint--right hint--bounce" data-hint="Enter in your email address"> 
         <TextField 
          hintText="Email" 
          floatingLabelText="Email" 
          type="email" 
          errorText={this.state.email_error_text} 
          onChange={e => this.changeValue(e, 'email')} 
         /> 
        </span> 
        <br /> 
        <span className="hint--right hint--bounce" data-hint="Enter your password"> 
         <TextField 
          hintText="Password" 
          floatingLabelText="Password" 
          type="password" 
          errorText={this.state.password_error_text} 
          onChange={e => this.changeValue(e, 'password')} 
         /> 
        </span> 
       </Dialog> 
       <h1>VPT</h1> 
       <h2>Project DALI</h2> 
       <RaisedButton 
        label="Login" 
        primary={true} 
        onTouchTap={this.handleTouchTap.bind(this)} 
       /> 
      </div> 
     ); 
    } 
} 

export default Form; 

Gibt es eine Möglichkeit, dass ich meine gewünschte Funktionalität erreicht werden kann, ohne eine wesentliche Änderung an den Code zu machen, oder es muss komplett überarbeitet werden?

Jede Hilfe wäre viel

Vielen Dank für Ihre Zeit

+0

finden ich Sie wirklich in http://redux-form.com für diese aussehen empfehlen würde. Hier ist ein Beispiel: http://redux-form.com/5.2.1/#/examples/synchronous-validation – kromit

Antwort

6

Hat die Prüfung nach einer gewissen Verzögerung geschehen? Eine Lösung, von der ich denke, dass sie in den meisten Situationen ausreichen würde, wäre, den Code ein wenig aufzuteilen. Aktivieren Sie nicht Ihre isDisabled() Funktion in changedValue(). Stattdessen muss es stattdessen auf dem onBlur Ereignis ausgeführt werden.

Versuchen Sie folgendes:

<TextField 
    hintText="Password" 
    floatingLabelText="Password" 
    type="password" 
    errorText={this.state.password_error_text} 
    onChange={e => this.changeValue(e, 'password')} 
    onBlur={this.isDisabled} 
/> 

und dann Ihre Funktion wird:

changeValue(e, type) { 
    const value = e.target.value; 
    const nextState = {}; 
    nextState[type] = value; 
    this.setState(nextState); 
} 
+0

Momentan gibt es keine Verzögerung, daher wird die Fehlermeldung angezeigt, bis die Validierungsparameter erfüllt sind, aber ich möchte die Überprüfung danach durchführen. – BeeNag

+0

Danach wann genau? Meine Antwort oben prüft, wann der Benutzer die Textbox "verlässt". Ist das nicht wonach Sie suchen? – Chris

+0

onBlur tut es nicht isDisabled wird nie aus irgendeinem Grund aufgerufen, was bedeutet, dass das onBlur-Ereignis nicht feuert ?? – BeeNag

0

Sie können onblur Textfeld verwenden Ereignis geschätzt. Es wird ausgelöst, wenn der Eingang den Fokus verliert.

+0

Während Ihr Vorschlag funktionieren würde, ist es wahrscheinlich besser, den Wert mit jedem Tastendruck zu aktualisieren, aber die Validierung stattdessen onblur . – Chris

2

Diese library, dass ich geschaffen hatte, der alles kümmert, um die Validierung Feldern und unterstützt Material-ui Komponenten wie gut ...

Ihre Felder zu validieren, müssen Sie nur Sie Feldkomponente wickeln und fertig ... viel Mühe Sparzustand Ihnen bei der Verwaltung Elf manuell.

<Validation group="myGroup1" 
    validators={[ 
      { 
      validator: (val) => !validator.isEmpty(val), 
      errorMessage: "Cannot be left empty" 
      }, ... 
     }]}> 
      <TextField value={this.state.value} 
         className={styles.inputStyles} 
         style={{width: "100%"}} 
         onChange={ 
         (evt)=>{ 
          console.log("you have typed: ", evt.target.value); 
         } 


    }/> 

+0

Wenn Sie für Ihre eigenen Bibliotheken werben möchten, müssen Sie sie deklarieren - siehe [Stack Overflow-Verhalten] (http: // stackoverflow.com/help/behaviour) – icc97

+1

Ich habe die Antwort bearbeitet, danke für das Moderieren und darauf hinweisen. –

0

Ich habe für die Validierung von Formularen nur npm package veröffentlicht. Arbeitsbeispiel kann auf meinem github profile

+0

https://node-react-redux.herokuapp.com/login –

Verwandte Themen