Validation in react MDC Web

Question

I am using the Material Design Component as shown below

<form className="container" onSubmit={this.handleFormSubmit}> 
  <TextField outlined label='User Name' className="w-100 mb-1 mt-2 help-block" helperText={<HelperText>Help Me!</HelperText>}>
<Input value={this.state.userName || ''} name="userName" onChange ={this.handleInputChange} /></TextField>
<Button raised className="mr-1" type="submit">Sign up</Button>
</form>

How to display the validation error message and make the outer-border red

score 0 · Answer 1 · answered Jun 05 '20 at 13:55

Validation

validator = new FormValidator([
        {
            field: 'userName',
            method: 'isEmpty',
            validWhen: false,
            message: 'Email is required.'
        },
        {
            field: 'password',
            method: 'isEmpty',
            validWhen: false,
            message: 'Password is required.'
        },
        {
            field: 'confirmPassword',
            method: 'isEmpty',
            validWhen: false,
            message: 'Password confirmation is required.'
        },
        {
            field: 'confirmPassword',
            method: this.passwordMatch,   // notice that we are passing a custom function here
            validWhen: true,
            message: 'Password and password confirmation do not match.'
        }
    ]);


    <TextField outlined label='User Name' className="w-100 mb-1 mt-2 help-block"
      helperText={<HelperText validation>{validation.userName.message}</HelperText>}>
   <Input isValid={!validation.userName.isInvalid} value={this.state.userName || ''} name="userName" onChange={this.handleInputChange} />
</TextField>

Validation in react MDC Web

1 Answers1