kettanaito

<Input
  name="confirmPassword"
  type="password"
  required
  skip />

kettanaito

<Input
  name="firstName"
  required={({ get }) => {
    // resolves any time "value" prop of "lastName" changes
    return !!get(['lastName', 'value']);
  }} />
  
<Input
  name="lastName"
  required={({ get }) => {

kettanaito

// src/validation-messages.js
export default {
  ...
  
  name: {
    userEmail: {
      async: ({ value, errorCode }) => {
        return`E-mail "${email}" is already registered. Error code: ${errorCode}.`;
      }
    }

kettanaito

import React from 'react';
import { Form } from 'react-advanced-form';

export default class RegistrationForm extends React.Component {
  validateEmail = ({ value, fieldProps, fields, form }) => {
    return fetch('https://backend/', { body: value })
      .then(res => res.json())
      .then((res) => {
        return {
         /* Determine if the e-mail is valid based on response */

kettanaito

import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import { addItem, removeItem } from '@state/cart/actions';
import { getTotalPrice } from '@state/cart/selectors';
import { Grid, Box, Button } from '@client/components';

/* Components */
import CartItemsList from './components/CartItemsList';

kettanaito

import React from 'react';
import { Form } from 'react-advanced-form';
import { Input } from '...';

export default class RegistrationForm extends React.Component {
  registerUser = ({ serialized, fields, form }) => {
    return fetch('https://backend.dev/user', {
      method: 'POST',
      body: JSON.stringify(serialized)
    });

kettanaito

/**
 * Accepts a number and returns an Array filled with numbers
 * starting from 1 and up to the given number.
 * @example
 * arrayWithNumbers(5)
 * // [1, 2, 3, 4, 5]
 */
export default function arrayWithNumbers(number) {
  return Array(number).fill().map((_, i) => i + 1)
}

kettanaito

{
  type: {
    email: ({ value }) => isEmail(value)
  }
}

kettanaito

{
  type: {
    password: {
      capitalLetter: ({ value }) => /[A-Z]/.test(value),
      oneNumber: ({ value }) => /[0-9]/.test(value),
      minLength: ({ value }) => (value.length > 5)
    }
  }
}

kettanaito

{
  name: {
    confirmPassword: {
      matches: ({ value, get }) => {
        return (value === get(['userPassword', 'value']);
      }
    }
  }
}