Verification of form using reaction and material-ui

Question

I am currently trying to add confirmation to a form created using material-ui components. I am working, but the problem is that the way that I am now performing the validation function is currently being called whenever the input state changes (i.e., each letter that is entered). However, I want my check to be performed only after the input stops.

Given my current code:

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; 

Is there a way in which I can achieve the desired functionality without making significant changes to the code, or should this be completely reorganized?

Any help would be greatly appreciated

thank you for your time

Answer 1

Should a check occur after some delay? The solution, which I think will be sufficient in most situations, would be to break up your code a bit. Do not run the isDisabled() function in changedValue() . Instead, it runs in onBlur .

Try the following:

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

and then your function will look like this:

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

Answer 2

This library that I created takes care of everything related to field validation, and it also supports material-ui components ...

To check your fields, you just need to wrap the field component, and you're done ... save a ton of effort in manually managing the state.

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

Answer 3

The easiest way to call form.reportValidity() . form can be obtained by calling event.currentTarget.form .

Answer 4

I just published the npm package for form validation. A working example can be found on my github profile

Answer 5

The current version of Material-UI does not use the errorText propeller, but there is a way that you can use to display the error and apply the check to the TextField in the Material-UI.

We use the error (Boolean) property to indicate whether there is an error or not. Next, to display the error text, use the helperText TextField property in the Material-UI, just provide it with the error text that you want to display.

Do it like:

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

Answer 6

You can use the onblur text field event. This is triggered when the input loses focus.