I use React js and Material-UI. How can i validate "correct" green color validation on button submit click?

Question

Help,please. I use React js and Material-IU. I did "incorrect" red color textfield validation with errorText. How can i validate "correct" with green color on buttonsubmit click?

validate = () => {  
  const cardNumber = '1234567890123456'; //credit card form with 2 fields
  const expiryNumber = '1234';
  let isError = false;
  const errors = {};

  if (this.state.number != cardNumber) { //cardNumber validation
    isError = true;
    errors.numberError = 'failed';
    }

  if (this.state.expiry != expiryNumber) { //expiry validation
    isError = true;
    errors.expiryError = "failed";
    }

  if(isError) {
    this.setState({
        ...this.state,
        ...errors
    });
    }

  return isError;
  }


onSubmit = e => {    // on Button submit   
  e.preventDefault();
  const err = this.validate();
  if (!err) {
    this.setState({
      number: "",
      expiry: ""
      });
    console.log(this.state);
    };
  }    // next will be render <TextField>    

Answer 1

I tried using an extra field in the component state, successValidation, that I change in onSubmit depending on the validation outcome. I then used that state property to determine what style to pass on to underlineStyle (property of the TextField). Maybe not the cleanest solution (don't know) but as far as I can tell it works. You can see it in action in this JSFiddle demo.

By the way: It was a while since I used Material-UI, but they have pretty good documentation to refresh your memory. You can, for example, see all the props for TextField at the bottom of this page.

const { RaisedButton, MuiThemeProvider, getMuiTheme, TextField } = MaterialUI;

 class Test extends React.Component {

  state = {
    value: 'good',
    error: false,
    successValidation: false
  }

  handleInputChange = (e, newValue) => {
    // reset errors and validation as well
    this.setState({
        value: newValue, 
      error: false,
      successValidation: false
     });
  }

  isValid = () => {
    const {value} = this.state;
    return value != 'bad';
  }

  onSubmit = () => {
    if(this.isValid()) {
        this.setState({successValidation: true, error: false});
    } else {
        this.setState({error: true});
    }

  }

  render = () => {
    const {value, error, successValidation} = this.state;
    const underlineStyle = successValidation ? { borderColor: 'green' } : null;
    return (
      <div style={{width: '50%', margin: '0 auto'}}>
        <h3>The input "bad" will cause error</h3>
        <h3>All other input will cause green underline on submit</h3>
        <TextField 
          errorText={error ? 'Validation error!' : ''}
          name="test" 
          value={value} 
          onChange={ this.handleInputChange }
          underlineStyle={underlineStyle}
         />
        <RaisedButton onClick={ this.onSubmit }>Submit</RaisedButton>
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Test />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);