Input Text validation in react for containing at least one character and one number

Question

i want to add a validation in an input field when user enters a value onKeyDown event. The validation is that my input must contain at least on Character and a least one number. The validation texts must be enabled or disabled when the validations are true. Also if the user backspaced and the text is not containg at least one value or one number the validations must be enabled. I've set the internal state with two flag. My question is how my validation function must be? Code:

const InputField = props => (
  <div className="input-row">
    <input
      {...props.input}
      type={props.type}
      className="form-control input-box__input"
      placeholder={props.placeholder}
      value={props.value}
      defaultValue={props.defaultValue}
      defaultChecked={props.defaultChecked}
      disabled={props.disabled}
      onChange={props.onChange}
      onKeyDown={this.onKeyDown}
      checked={props.checked}
    />
    {props.meta.touched && props.meta.error &&
    <span className="error">
        {props.intl.formatMessage({ id: props.meta.error }) }
      </span>}
  </div>
);

const onKeyDown = (e) => {
    // Add logic here
    }
}

Add code, references, examples, outputs. We can't help you if you can't help us. Refer to: [`How do I ask a good question?`](https://stackoverflow.com/help/how-to-ask) — Alex, Jun 22 '18 at 08:55
Possible duplicate of [Regex pattern to match at least 1 number and 1 character in a string](https://stackoverflow.com/questions/7684815/regex-pattern-to-match-at-least-1-number-and-1-character-in-a-string) — Vikasdeep Singh, Jun 22 '18 at 09:19
How to add this pattern in my function when the user types a text on the fly — RamAlx, Jun 22 '18 at 09:20

score 1 · Accepted Answer · answered Jun 22 '18 at 09:27

please check the following link

https://jsfiddle.net/69z2wepo/201010/

it has the following code:

class Hello extends React.Component {
    state = {hasError:false};

    onChange(event){
    if(event.target.value.match(/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/)){
        this.setState({hasError:false});
    }else{
        this.setState({hasError:true});
    }
  }

  render() {
    return <div>
      <input name="name" onChange={this.onChange.bind(this)}/>
      {this.state.hasError && <span>Error</span>}
    </div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

this works as you expect it to in a react application.

SLCH000 · Answer 2 · 2018-06-22T12:07:55.910

btw

1) You can replace

<input
  {...props.input}
  type={props.type}
  className="form-control input-box__input"
  placeholder={props.placeholder}
  value={props.value}
  defaultValue={props.defaultValue}
  defaultChecked={props.defaultChecked}
  disabled={props.disabled}
  onChange={props.onChange}
  onKeyDown={this.onKeyDown}
  checked={props.checked}
/>

With

<input
  {...props.input}
  {...props}
  className="form-control input-box__input"
  onKeyDown={this.onKeyDown}
/>

2) You can use html power ( https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_pattern ) and do next:

<input
 {...props.input}
 {...props}
 {...this}
/>

Where properties of this class are

className = 'form-control input-box__input';
onChange = (e) => {
 e.target.checkValidity();
 if (this.props.onChange) this.props.onChange()
}

But to use it, input must be inside <form></form>

Input Text validation in react for containing at least one character and one number

2 Answers2