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>
如何显示验证错误消息并使外部边框变为红色
验证
validator = new FormValidator([
{
field: 'userName',method: 'isEmpty',validWhen: false,message: 'Email is required.'
},{
field: 'password',message: 'Password is required.'
},{
field: 'confirmPassword',message: 'Password confirmation is required.'
},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>