Submit Implementation

[landolabrum]

Hey Vacuumlabs, I am a huge fan and am using react-custom-validation in my Reactjs + FireBase project. In the following example, regValidate.js, I can validate but cannot submit.
In the last example regSubmit.js I can submit but cannot validate. How do I submit with validation?

regValidate.js

import React, { Component } from 'react'
import Promise from 'bluebird'
import update from 'immutability-helper'
import validator from 'validator'
import {validated} from 'react-custom-validation'
import { ref, firebaseAuth } from '../config/constants'
import firebase from 'firebase'


function auth (email, pw) {
    return firebaseAuth().createUserWithEmailAndPassword(email, pw)
    .then(saveUser)
    .catch((error) => console.log('Oops', error))
}

function saveUser (user) {
    return ref.child(`users/${user.uid}/info`)
    .set({
         email: user.email,
         uid: user.uid
         })
    .then(() => user)}

export default class Register extends Component {
 
 state = {
 fields: { email: '', pw: '', repw: ''}, }
    
 fieldChange = (field, value) => {this.setState(update(this.state, {fields: {[field]: {$set: value}}}))  }
    render() {
        return (
            
            <Form
                fields={this.state.fields}
                onChange={this.fieldChange}
                onValid={()=> alert('MAKE ME SUBMIT')}
                onInvalid={() => alert('Error!')}
                />)
    }
}
const isEmail = (email) =>
validator.isEmail(email) ? null : 'This is not a valid email.'

const minLength = (pw, length) =>
pw.length >= length ? null : 'Password is too short.'

const areSame = (pw, repw) =>
pw === repw ? null : 'Passwords do not match.'

function validationConfig(props) {
    const {email, pw, repw} = props.fields
    
    return {
    fields: ['email', 'pw', 'repw'],
        
    validations: {
    email: [
            [isEmail, email]
            ],
    pw: [[minLength, pw, 3]],
    repw: {
    rules: [[areSame, pw, repw]],
    fields: ['pw', 'repw']
    }
    },
    }
}
class Form extends React.Component {
    render() {
        const {fields, onChange, onValid, onInvalid, $field, $validation} = this.props
        return (
                <form>
                <input ref={(email) => this.email = email} value={fields.email}
                {...$field('email', (e) => onChange('email', e.target.value))}
                ref={(email)=>this.email=email} />
                {$validation.email.show && <span>{$validation.email.error.reason}</span>}
                
                <input ref={(pw) => this.pw = pw} value={fields.pw}
                {...$field('pw', (e) => onChange('pw', e.target.value))}/>
                {$validation.pw.show && <span>{$validation.pw.error.reason}</span>}
                
                <input value={fields.repw}
                {...$field('repw', (e) => onChange('repw', e.target.value))}/>
                {$validation.repw.show && <span>{$validation.repw.error.reason}</span>}
                
                <button onClick={(e) => {
                e.preventDefault()
                this.props.$submit(onValid, onInvalid)
                }}>Register</button>
                </form>
                )
    }
}
Form = validated(validationConfig)(Form)

regSubmit.js

import React, { Component } from 'react'
import { ref, firebaseAuth } from '../config/constants'
import firebase from 'firebase'
import Promise from 'bluebird'
import update from 'immutability-helper'
import validator from 'validator'
import {validated} from 'react-custom-validation'


function auth (email, pw) {
    return firebaseAuth().createUserWithEmailAndPassword(email, pw)
    .then(saveUser)
    .catch((error) => console.log('Oops', error))
}

function saveUser (user) {
    return ref.child(`users/${user.uid}/info`)
    .set({
         email: user.email,
         uid: user.uid
         })
    .then(() => user)
}


export default class Register extends Component {
 handleSubmit = (e) => {
    e.preventDefault()
    auth(this.email.value, this.pw.value)
  }
    
render () {
    return (
            
           
<form onSubmit={this.handleSubmit}>
            <input ref={(email) => this.email = email} /> 
            <input ref={(pw) => this.pw = pw} />
         
          <button type="submit">test</button>
        </form>
    )
  }
}

[marcelka]

Hi Lando,

I am not 100% sure if I understand correctly where the problem is. I can see that you managed to call the onValid function correctly (it alerts "MAKE ME SUBMIT" when one hits the register button). Therefore, I guess the question is how to perform submit using this function. The answer is really simple, to submit the form you just need to implement the onValid function so that it does the submitting, like so:

export default class Register extends Component {
  state = { fields: { email: '', pw: '', repw: ''}, }
  fieldChange = (field, value) => {this.setState(update(this.state, {fields: {[field]: {$set: value}}}))  }

  render() { 
    return ( 
      <Form
        fields={this.state.fields}
        onChange={this.fieldChange}
        onValid={()=> auth(this.state.fields.email, this.state.fields.pw)}
        onInvalid={() => alert('Error!')}
      />)
    }
  }

I hope this helps. If not, please provide more details about the problem.

Good luck!