ReactBootstrapで会員登録フォームを作成する（入力チェックをフロント側で）

はじめに

前回の記事で登録フォームの未入力チェックしか実装できなかったので、今回は半角チェックや文字数チェックおよびエラーメッセージの調整、独自の入力チェックを追加するなど実装しました。 px-wing.hatenablog.com

コード

import React from 'react'
import {Form, Button, Row, Col} from 'react-bootstrap'
import './siginin.css'
import { Formik } from 'formik'
import * as yup from 'yup'

const SignIn = () => {
  const schema = yup.object({
    userName: yup.string().matches(/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/, 'ユーザー名は半角英数字と記号のみ').min(4,'ユーザー名は最低4文字です').required('ユーザー名を入力してください。'),
    mailAddress: yup.string().email('正しいメールアドレスを入力してください').required('メールアドレスを入力してください。'),
    sex: yup.string().required("性別を選択して下さい。"),
    birthDay: yup.date().typeError('正しい日付を入力してください').required('誕生日を入力してください。').test('birthDayCheck', '未来の日付を指定することはできません。', (value) => value <= new Date()),
    password: yup.string().matches(/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/, 'ユーザー名は半角英数字と記号のみ').min(8,'パスワードは最低8文字です').required('パスワードを入力してください。'),
    passwordConfirm: yup.string().oneOf([yup.ref('password')], 'パスワードが一致しません。').required('パスワードを入力してください。'),
  });

  return (
      <Formik
        validationSchema={schema}
        onSubmit={(values) => alert(JSON.stringify(values))}
        initialValues={{ userName: '', mailAddress: '', sex: '', birthDay: '', password: '',passwordConfirm: ''}}
      >
        {
          ({handleSubmit, handleChange, handleBlur, values, errors, touched}) => (
    <>      
      <h4>会員登録フォーム</h4>
      <Form  noValidate   onSubmit={handleSubmit}>
        <Form.Group controlId="formGroupName">
          <Form.Label>ユーザー名</Form.Label>
          <Form.Control name="userName" type="text" placeholder="Enter name" value={values.userName} onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.userName && errors.userName)}/>
          <Form.Control.Feedback>OK!</Form.Control.Feedback>
          <Form.Control.Feedback type="invalid">{errors.userName}</Form.Control.Feedback>
        </Form.Group>
        <Form.Group controlId="formGroupEmail">
          <Form.Label>メールアドレス</Form.Label>
          <Form.Control name="mailAddress" type="email" placeholder="Enter email" value={values.mailAddress} onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.mailAddress && errors.mailAddress)}/>
          <Form.Control.Feedback>OK!</Form.Control.Feedback>
          <Form.Control.Feedback type="invalid">{errors.mailAddress}</Form.Control.Feedback>
        </Form.Group>
        <Form.Row>
          <Form.Group as={Col} md="3" controlId="validationSex">
            <Form.Label>性別</Form.Label>
            <div key='inline-radio' required>
              <Form.Check inline label="男性" name="sex" type='radio' id='inline-radio-1'  value='男性' onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.sex && errors.sex)}/>
              <Form.Check inline label="女性" name="sex" type='radio' id='inline-radio-2' value='女性' onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.sex && errors.sex)}/>
              <div className='text-danger'>{errors.sex}</div>
            </div>
          </Form.Group>
          <Form.Group as={Col} md="9" controlId="validationBirthDay">
            <Form.Label>誕生日</Form.Label>
            <Form.Control name="birthDay" type="date" placeholder="Enter Birthday" value={values.birthDay} onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.birthDay && errors.birthDay)}/>
            <Form.Control.Feedback>OK!</Form.Control.Feedback>
          <Form.Control.Feedback type="invalid">{errors.birthDay}</Form.Control.Feedback>            
          </Form.Group>
        </Form.Row>
        <Form.Group controlId="formGroupPassword">
          <Form.Label>パスワード</Form.Label>
          <Form.Control name="password" type="password" placeholder="Password"  value={values.password} onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.password && errors.password)}/>
          <Form.Control.Feedback>OK!</Form.Control.Feedback>
          <Form.Control.Feedback type="invalid">{errors.password}</Form.Control.Feedback>            
        </Form.Group>
        <Form.Group controlId="formGroupPasswordConfirm">
          <Form.Label>パスワード（確認用）</Form.Label>
          <Form.Control name="passwordConfirm" type="password" placeholder="Password"  value={values.passwordConfirm} onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.passwordConfirm && errors.passwordConfirm)}/>
          <Form.Control.Feedback>OK!</Form.Control.Feedback>
          <Form.Control.Feedback type="invalid">{errors.passwordConfirm}</Form.Control.Feedback>            
        </Form.Group>
        <div className='text-center'>
          <Button variant="primary" type="submit">ユーザー登録</Button>
        </div>
      </Form>
    </>    
      )}
      </Formik>      
  )
}

export default SignIn