it-swarm.com.de

Formularvalidierung mit reagieren und Material-ui

Ich versuche derzeit, eine Validierung zu einem Formular hinzuzufügen, das aus Komponenten von Material-Ui besteht. Ich habe es funktioniert, aber das Problem ist, dass die Validierungsfunktion so, wie ich sie gerade mache, derzeit bei jeder Zustandsänderung in der Eingabe (d. H. Jedem eingegebenen Buchstaben) aufgerufen wird. Ich möchte jedoch, dass meine Bestätigung erst erfolgt, wenn die Eingabe beendet ist.

Angesichts meines aktuellen Codes:

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, die gewünschte Funktionalität zu erreichen, ohne den Code wesentlich zu ändern, oder muss der Code komplett überarbeitet werden?

Jede Hilfe wäre sehr dankbar

Vielen Dank für Ihre Zeit

13
BeeNag

Muss die Prüfung nach einer gewissen Verzögerung erfolgen? Eine Lösung, die meiner Meinung nach in den meisten Situationen ausreichen würde, wäre, Ihren Code etwas aufzuteilen. Lösen Sie Ihre isDisabled()-Funktion nicht in changedValue() aus. Lassen Sie es stattdessen für das Ereignis onBlur ausführen.

Versuche dies:

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

und dann wird deine Funktion:

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

Diese Bibliothek die ich erstellt hatte, kümmert sich um alles, was mit der Validierung von Feldern zusammenhängt, und es unterstützt auch Material-UI-Komponenten ...

Um Ihre Felder zu überprüfen, müssen Sie nur Ihre Feldkomponente einpacken und sind damit fertig ... Sie sparen viel Aufwand bei der manuellen Verwaltung des Zustands.

<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);
                        }


     }/>

3
VISHAL DAGA

Am einfachsten ist es, form.reportValidity() aufzurufen. form kann durch Aufruf von event.currentTarget.form erhalten werden.

1
Loke

In der aktuellen Material-UI-Version wird die Requisite errorText nicht verwendet. Es gibt jedoch eine Möglichkeit, Fehler anzuzeigen und die Validierung auf das TextField in Material-UI anzuwenden.

Wir verwenden die Eigenschaft error (Boolean), um anzugeben, ob ein Fehler vorliegt oder nicht. Um den Fehlertext anzuzeigen, geben Sie im Material-UI die Eigenschaft helperText des TextField ein und geben Sie den anzuzeigenden Fehlertext an.

Mach es wie:

<TextField
  value={this.state.text}
  onChange={event => this.setState({ text: event.target.value })}
  error={text === ""}
  helperText={text === "" ? 'Empty!' : ' '}
/>
1
whiteknight

Ich habe soeben das npm-Paket zur Validierung von Formularen veröffentlicht. Arbeitsbeispiel finden Sie in meinem github-Profil

1
Hayk Aghabekyan

Sie können das Textfeldereignis auf Unschärfe anwenden. Wird ausgelöst, wenn die Eingabe den Fokus verliert.

0