ReactDemo.js

/*************** FormValidatorMixin ******************/

var FormValidationMixin = {
  
  regex: function(type){
    var regex = ""
    var type = type.toUpperCase()
    
    switch(type){
      case "ALPHANUMERIC": 
        regex = /^[A-Z,a-z,0-9]+$/
        break       
      case "NUMERIC" :
        regex = /^[0-9]+$/
        break
      case "ALPHABATIC":
        regex = /^[A-Z,a-z]+$/
        break
      default:
        regex = /^[a-z]+$/
    }
    return regex
  },
  
  validate_field: function(field_value, min_length, max_length, type){
    var return_value = true    
    return_value = this.regex(type).test(field_value)
    if(field_value.length < min_length || field_value.length > max_length){
      return_value = false
    }    
    return return_value    
  },
  
  match_fields: function(value1, value2, case_sensitive){
    var return_value = true
    if(case_sensitive == false){
      value1 = value1.toUpperCase()
      value2 = value2.toUpperCase()
    }
    return_value = (value1 == value2 ) ? true : false
    return return_value
  }
}

/****************FormValidatorMixin*************************/


/***************Form*****************************/

var SetPasswordForm = React.createClass({
  mixins: [FormValidationMixin],
  
  getInitialState: function(){    
    return { password: '' , confirm_password: '', errors: [ ] }
  },
  
  submitForm: function(e){
    e.preventDefault()
    this.clearErrrors 
    var password = this.state.password
    var confirm_password = this.state.confirm_password      
    var errors = []
    var valid_password = this.validate_field(password, 8, 20, 'alphabatic')
    var password_and_confirm_password_match = this.match_fields(password, confirm_password, true)
    
    if(!valid_password){
      alert('password is not valid')
    }
    if(!password_and_confirm_password_match){
      alert('Password and confirm password not match')
    }
  },
  
  clearErrors: function(){
    this.setState({errors: []})
  },
  
  changePassword: function(e){
    this.setState({ password: e.target.value})
  },
  
  changeConfirmPassword: function(e){
    this.setState({confirm_password: e.target.value})
  },
  
  render: function(){
    return (
      <form>
        <label>Password : </label>
        <input type='text' value={this.state.password} onChange={this.changePassword} ref='password' />
        <br></br>
        <label>Confirm Password : </label>
        <input type='text' value={this.state.confirm_password} onChange={this.changeConfirmPassword} ref='confirm_password'/>
        <br></br>
        <input type='submit' value="Set Password" onClick={this.submitForm}/>
      </form>
    );  
  }

})
/*********************Form**********************************/ 







React.render(
  <SetPasswordForm />,
  document.getElementById('mount_point')
)