需要时用红色边框突出显示输入类型

Question

每当表单出现错误时，我都会很难突出显示文本框或将其变成红色。

当前，我只能通过操纵它们的状态来突出显示一个输入。我要的是在文本框中没有任何值或电子邮件无效时，将其中两个都设为红色。

这是我当前用于验证表单的代码

checkform() {

    if(this.state.formData.username === null){
        this.setState({
            errorMessage: 'Email Field is Required',
            errorField: 'password'
        });

    }

    if (this.state.formData.password.length < 1) {

        this.setState({
            errorMessage: 'password_must_have_minimum_characters',
            errorField: 'email'
        });
        return false;
    }

    return true;
}

这是我的表单渲染组件

<form action={'/login'} onSubmit={this.handleSubmit} noValidate>
                    <input
                        className={"PixelForm-input" + " " + (this.state.errorField === 'email' ? 'hasError' : '')}
                        name={'username'}
                        id={'username'}
                        required
                        value={state.username}
                        onChange={this.handleChange}
                        placeholder={t('form.login.username.label')}/>

                    <input
                        className={"PixelForm-input" + " " + (this.state.errorField === 'password' ? 'hasError' : '')}
                        id={'password'}
                        name={'password'}
                        required
                        onChange={this.handleChange}
                        type="password"
                        placeholder={t('form.login.password.label')}/>
                    {(this.state.errorMessage) ? (
                        <div class="PixelForm-error form-group">
                            {t(this.state.errorMessage)}
                        </div>) : ''}
                    <ForgotPasswordLink onClick={() => this.props.onForgotPasswordClick()}
                                        id={'ForgotPasswordLinkHeader'}/>


                    <button type={'submit'} disabled={state.isLoading} id={'LoginSubmitButton'}>
                        <span class="spinningBall" style={{display: (state.isLoading) ? 'inline' : ''}}>
                            <img
                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAUdJREFUOBGV0s9KAlEUx/G5Q9qgkjWr2pSghS4M6jUKWvccrVtHuOsVgnDfLnoCcWFQC9Gds1GDICFSo/H7ixz/4DDOgQ96z5xz5t6ZsayI8H1/gAZuUQot56KBvVxArooaPtHHDZILdSTUnIAtCxf/F+QLuIeHB8yGsHCQwsaq5vkcNVdo4fovrya4SMPMF4f9p+4OL8hruykkMDLG+GFNS/kK6zEuNCADm2Yl1gpqOxS+4lQDHPwibrRpcDVgEzpC3PihYaQBOnc6bjf1OXga8IUsT1RHWSuoPaJwB3UNeIc+ijwig2b1nGGIZz197aCHPS6WEfUtXFJbxBO93vTL0xPVlnLYYkiTi9pZEORcFuc4wRuqsIK7UaCtHUPn05G0xQ/oDe1iH8rX8cgN9BZmA7RQMGibn0McQHdV0zf08TRo7PIbxAT5jbEY+4OSmwAAAABJRU5ErkJggg=="/>
                        </span>
                        {t('text.do_login')}
                    </button>

                </form>

当前结果看起来像这样

当电子邮件地址和密码没有数据时，我该如何用红色突出显示，而将这些特定表单字段用红色突出显示

Answer 1

是可以的，但是您需要更改状态变量，请尝试此操作，请记住在验证后删除错误

checkform() {

    if(this.state.formData.username === null){
        this.setState({
            this.state...,
            emailErrorMessage: 'Email Field is Required'

        });

    }

    if (this.state.formData.password.length < 1) {

        this.setState({
            this.state...,
            passwordErrorMessage: 'password_must_have_minimum_characters',
        });
        return false;
    }

    return true;
}

现在将渲染更改为

<input
                        className={"PixelForm-input" + " " + (this.state.emailErrorMessage === ''Email Field is Required' ? 'hasError' : '')}
                        name={'username'}
                        id={'username'}
                        required
                        value={state.username}
                        onChange={this.handleChange}
                        placeholder={t('form.login.username.label')}/>

                    <input
                        className={"PixelForm-input" + " " + (this.state.passwordErrorMessage === 'password_must_have_minimum_characters' ? 'hasError' : '')}
                        id={'password'}
                        name={'password'}
                        required
                        onChange={this.handleChange}
                        type="password"
                        placeholder={t('form.login.password.label')}/>
                    {(this.state.errorMessage) ? (
                        <div class="PixelForm-error form-group">
                            {t(this.state.passwordErrorMessage) || t(this.state.passwordErrorMessage)}
                        </div>) : ''}