输入验证 redux 表单答案

【问题标题】：input validation redux forms输入验证 redux 表单
【发布时间】：2023-03-21 05:28:01
【问题描述】：

尝试在出错期间为输入框添加边框。在检查空值的地方进行一些验证，但如果为空，如何添加边框？

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

【问题讨论】：

标签： reactjs react-redux jsx

【解决方案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'}/>

方法二

或者，如果您更喜欢组件的内联样式，则无需添加更改 CSS 文件，只需将 input 标签更改为，

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

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

如果你喜欢，当文本框为空时，会显示带有红色边框的文本框和错误消息，那么你只需在输入字段中输入required关键字，如下所示

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

所以，如果您提交表单，如果输入字段为空，则会显示错误消息，请尝试使用 validate() 删除不必要的 javascript 代码

仅执行此操作并删除不必要的代码

【讨论】：