CODEWITHSUNDEEP
reactjsreact-reduxjsx
monkeyjs
monkeyjs

Reputation: 612

input validation redux forms

Trying to add a border to the input boxes during an error.have some validation in place where it checks for empty values but how to adda border if empty?.

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

Upvotes: 0

Views: 576

Answers (2)

Mr. Patel
Mr. Patel

Reputation: 19

If you want like,when text box is empty then there shows text box with red border & error message ,then you have to just put required keyword in input field,as below 

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

So,If you submit the form then,if input field will be empty then it will show error message,Try that & remove unnecessary javascript code with validate()

Only Do this & remove unnecessary code

Upvotes: 0

bharadhwaj
bharadhwaj

Reputation: 2139

You can add it in a similar way you did for displaying error.

Method 1

Add this in your CSS file.

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

After that change the line

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

to the one below

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

Method 2

Or if you prefer inline styling of components, then you don't need to add change your CSS file instead, simply, change the input tag to,

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

Hope this helps! :)

Upvotes: 1

Related Questions