Let's use the styled-component, ant design, and Redux form to build the login page. The page we're trying to build will look like the following screenshot:

The form will contain just three input components—an email field, a password field, and a submit button to submit the form when these fields are valid. So, let's create the login form into app/containers/Login/Form.js, as follows:

const LoginForm = props => {
  const { handleSubmit, pristine, submitting, message } = props;

  return (
    <Form onSubmit={handleSubmit} className="form-login-containers">
      <Spin spinning={submitting} tip="Submitting...">
        <H1 className="center">Rask Lege</H1>
        <Field
          name="email"
          hasFeedback
          component={renderInput}
          disabled={submitting}
          label="Email address"
          placeholder="[email protected]"
        />
        <Field
          hasFeedback
          type="password"
          name="password"
          component={renderInput}
          disabled={submitting}
          label="Password"
          placeholder="Password"
        />
        <Form.Item className="center">
          <Button
            type="primary"
            htmlType="submit"
            className="btn-submit"
            disabled={pristine || submitting}
          >
            Log in
          </Button>
        </Form.Item>
        {!!message && <p className="caption-invalid">{message}</p>}
      </Spin>
    </Form>
  );
};

Moreover, you can find the validation code inside app/containers/Login/Form.js, as follows:

const validate = values => {
  const errors = {};
  if (!values.get('email')) {
    errors.email = 'Required';
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.get('email'))
  ) {
    errors.email = 'Invalid email address';
  }

  if (!values.get('password')) {
    errors.password = "Password can't be blank";
  }

  return errors;
};

We're combining a feature provided by redux-form, called synchronous validation and we validate the form as the users enter something on the form. For example, using the preceding validation code we can prompt the user when they enter the wrong email format or skip a required form.