Question

尝试在错误期间向输入框添加边框。在检查空值的情况下进行了一些验证，但如果为空则如何添加边框？

<fieldset className="form-group">
                <input id="abc-name" {...abc} type="text" className="test"/>
                <br />
 { abc.touched && abc.error && <div className="alert-danger"> { email.error } </div> }
              </fieldset>
function validate(formProps) {
  const errors = {};
  if (!formProps.abc) {
    errors.abc = 'Please enter an abc';
  }

  return errors;
}

export default reduxForm({
  form: 'component',
  fields: [
    'abc',
    'def',
  ],
  validate,
}, mapStateToProps, actions)(Mycomponent);

Answer 1

您可以使用与显示错误类似的方式添加它。

方法1

在CSS文件中添加此内容。

error-textfield {
    border : 1px solid #ff0000;
}

之后改变行

<input id="abc-name" {...abc} type="text" className="test"/>

到下面的那个

<input id="abc-name" {...abc} type="text" className={abc.error ? 'error-textfield test' : 'test'}/>

方法2

或者如果您更喜欢组件的内联样式，那么您不需要添加更改CSS文件，只需将input标记更改为，

<input id="abc-name" {...abc} type="text" style={ abc.error ? { border : '1px solid #ff0000'} : null } className="test"/>

希望这有帮助！：）

Answer 2

如果您愿意，当文本框为空时，会显示带有红色边框的文本框。错误消息，那么您只需将required关键字放在输入字段中，如下所示

<input type="text" id="abc-name" className="test" required/>

因此，如果您提交表单，如果输入字段为空，则会显示错误消息，请尝试＆amp;使用validate()

删除不必要的JavaScript代码

只做这个＆amp;删除不必要的代码

输入验证redux表单

2 个答案:

方法1

方法2