Validating Forms

Gandalf Validating Forms

Examples

Sign up form

import SignupForm from 'js/components/SignupForm 
   //in a react component 
<SignupForm/>

Login Form

import LoginForm from 'js/components/LoginForm 
   //in a react component 

<LoginForm/>

To build a generic form

class Generic extends Gandalf {
  constructor() {
    const fields = {
      name: { // This is the name you use to reference this Text Input.
        component: TextInput,
        validators: ['required'], 
        // This is the requirements that Gandalf look for. Currently only supports 'email', 'required', 'numeric'
        errorPropName: 'error',
        onChangeHandler: 'onChangeText',
        // This function lets Gandalf react to the new onChange function name in React Native.
        props: {
          placeholder: '', // This is the placeholder text for the text input.
          style: styles.login // This is what initial styles you want it to have.
        },
        getValueInOnChange: (text) => text,
        debounce: 500,
      },
    };
    super(fields);
  }
  handleSubmit() {
    const data = this.getCleanFormData();
    if (!data) return;
    // Here is where you would hook up redux to it.
    console.log('goin\' to REDUX', data);
  }
  render() {
    const fields = this.state.fields;
    return (
      <View style={styles.mainContainer} >
        <View style={styles.container} >
          <View style={styles.container} >
            {fields.name.element}
          </View>
          <View style={styles.errorContainer} >
            <Text style={styles.errorMessage}>
               // This allows for conditional rending of error messages if there are any.
              {fields.name.errorMessage && fields.name.errorMessage}
            </Text>
          </View>
        </View>
        <TouchableHighlight style={styles.button} onPress={() => this.handleSubmit()}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableHighlight>
      </View >
    );
  }
}
export default Generic;

What is missing

Each Form's handleSubmit function is currently blank and will need to be wired up to redux.