この記事では、ReactとMaterial UIを用いて作った入力フォームにバリデーションチェックを実装する。

Reactをインストール

下記コマンドを入力して実行し、適切なプロジェクト名を入力し、ReactとJavaScriptを選択します。

npm create vite

作成されたフォルダに入り、下記コマンドで必要なパッケージをインストールします。node_moduleフォルダが作成されます。

npm install

バリデーションを実装する

下記コマンドを実行し、http://localhost:5173/にアクセスするとデフォルトの画面が立ち上がります。

npm run dev

srcフォルダ内のApp.jsxの中身を下記のように不要なものを一旦削除します。

App.jsx

function App() {
  return (
    <>
      
    </>
  )
}

export default App

App.cssファイルとindex.cssファイル内の内容をすべて削除します。真っ白な画面になります。

ここで、Material UIパッケージをインストールします。ターミナルをもう一つ立ち上げて、Reactフォルダ内で、Material UIのドキュメントを参考にして下記コマンドを入力し実行します。

npm install @mui/material @emotion/react @emotion/styled

次に、MaterialドキュメントのTextFieldに関連するページを参考にして、App.jsxにTextFieldを使ってみます。

App.jsx

import TextField from '@mui/material/TextField'

function App() {
  return (
    <>
      <div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
        <p>username: </p>
        <TextField
          error={true}                          // textFieldが赤くなります
          helperText="5~10文字入力してください"   // 文字が表示されます
          size='small'
        />
      </div>
    </>
  )
}

export default App

画面が下記のようになります。<TextField>のerror属性がtrueの場合、入力欄が赤色になります。また、helperText属性に文字が存在する場合も、ちゃんと表示してくれるようです。

ということで、入力した内容により<TextField>の属性を変化させればよさそうです。
同じように、パスワード入力欄とログインボタンを簡単に作ってみます。

App.jsx

import TextField from '@mui/material/TextField'

function App() {
  return (
    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
      <div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
        <p>username: </p>
        <TextField
          error={true}                            // textFieldが赤くなります
          helperText="5~10文字入力してください"     // 文字が表示されます
          size='small'
        />
      </div>
      <div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
        <p>password: </p>
        <TextField
          error={true}                            // textFieldが赤くなります
          helperText="8~16文字入力してください"     // 文字が表示されます
          size='small'
        />
      </div>
      <button style={{marginTop: '30px'}}>ログイン</button>
    </div>
  )
}

export default App

次に入力内容に応じて<TextField>の属性を変化させる部分について考えます。

まずusernameの入力欄に文字が入力されるたびに条件を満たすかを判定したいので、<TextField>にonChange属性を追加します。関数名をnameHandleChangeとします。

App.jsx

<div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
  <p>username: </p>
  <TextField
    error={true}
    helperText="5~10文字入力してください"
    size='small'
    onChange={nameHandleChange}
  />
</div>

nameHandleChange関数内では、入力された内容を取得し、正規表現を用いて条件に一致するかを判断します。さらに返されたBoolean型の結果で<TextField>の属性をコントロールしたいので、この結果をuseStateを使って管理します。

App.jsx

const [nameError, setNameError] = useState(false)  // usernameの入力が正しいかを保存する

const nameHandleChange = event => {
  const pattern = /^\w{5,10}$/g                // 5~10文字か
  const res = pattern.test(event.target.value) // event.target.value: textFieldに入力された内容
  setNameError(!res)                           // 結果をnameErrorに保存する
}

ここでsetNameError(!res)において、!resをnameErrorに保存しているのは、正規表現の結果がfalseの場合にnameErrorをtrueにしたい為です。

つぎにnameErrorの値によって<TextField>の表示を変化させたいので、usernameの<TextField>を下記のように修正します。

App.jsx

<div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
  <p>username: </p>
  <TextField
    error={nameError}
    helperText={nameError ? "5~10文字入力してください" : ''}
    size='small'
    onChange={nameHandleChange}
  />
</div>

そうすると下記のようになります。

パスワード入力欄も同じように実装します。全体のコードが下記のようになります。

App.jsx

import TextField from '@mui/material/TextField'
import { useState } from 'react'

function App() {
  const [nameError, setNameError] = useState(false)  // usernameの入力が正しいかを保存する
  const [passError, setPassError] = useState(false)  // passwordの入力が正しいかを保存する

  const nameHandleChange = event => {
    const pattern = /^\w{5,10}$/g                // 5~10文字か
    const res = pattern.test(event.target.value) // event.target.value: textFieldに入力された内容
    setNameError(!res)                           // 結果をnameErrorに保存する
  }

  const passHandleChange = event => {
    const pattern = /^\w{8,16}$/g                // 8~16文字か
    const res = pattern.test(event.target.value) // event.target.value: textFieldに入力された内容
    setPassError(!res)                           // 結果をpassErrorに保存する
  }

  return (
    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
      <div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
        <p>username: </p>
        <TextField
          error={nameError}
          helperText={nameError ? "5~10文字入力してください" : ''}
          size='small'
          onChange={nameHandleChange}
        />
      </div>
      <div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
        <p>password: </p>
        <TextField
          error={passError}
          helperText={passError ? "8~16文字入力してください" : ''}
          size='small'
          onChange={passHandleChange}
        />
      </div>
      <button style={{marginTop: '30px'}}>ログイン</button>
    </div>
  )
}

export default App

最後にログインボタンを押した際、入力形式が正しければ'OK!'と出力し(実際のアプリでは、バックエンドに処理を投げる)、そうでなければ'NO!'と出力するようにコードを追加します。

<button>のonClick属性に、handleClick関数を追加します。handleClick関数内では、nameErrorおよびpassErrorの値によって出力を変えます。

App.jsx

function App() {

  // ......省略
  
  const handleClick = () => {
    if (!nameError && !passError) {
      console.log('OK!')
    } else {
      console.log('NO!')
    }
  }

  return (
    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>

      {/* ......省略 */}

      <button onClick={handleClick} style={{marginTop: '30px'}}>ログイン</button>
    </div>
  )
}

これでおおむね完了ですが、nameErrorとpassErrorは初期値としてfalseを設定していますので、最初の画面で何も入力しない状態でも、!nameError && !passErrorがtrueになってしまいます。ここでは、useRefフックを使ってTextField内が空かどうかを確認します。

App.jsx

import TextField from '@mui/material/TextField'
import { useRef, useState } from 'react'

function App() {
  const usernameRef = useRef('')                     // username入力欄への参照
  const passwordRef = useRef('')                     // password入力欄への参照
  const [nameError, setNameError] = useState(false)  // usernameの入力が正しいかを保存する
  const [passError, setPassError] = useState(false)  // passwordの入力が正しいかを保存する

  const nameHandleChange = event => {
    const pattern = /^\w{5,10}$/g                // 5~10文字か
    const res = pattern.test(event.target.value) // event.target.value: textFieldに入力された内容
    setNameError(!res)                           // 結果をnameErrorに保存する
  }

  const passHandleChange = event => {
    const pattern = /^\w{8,16}$/g                // 8~16文字か
    const res = pattern.test(event.target.value) // event.target.value: textFieldに入力された内容
    setPassError(!res)                           // 結果をpassErrorに保存する
  }

  const handleClick = () => {
    const username = usernameRef.current.value   // usernameRefの現在の値を取得
    const password = passwordRef.current.value   // passwordRefの現在の値を取得
    
    // username, passwordに値が入っていて、かつnameErrorとpassErrorがfalseの場合
    if (username && password && !nameError && !passError) {
      console.log('OK!')
    } else {
      console.log('NO!')
    }
  }

  return (
    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
      <div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
        <p>username: </p>
        <TextField
          error={nameError}
          helperText={nameError ? "5~10文字入力してください" : ''}
          size='small'
          onChange={nameHandleChange}
          inputRef={usernameRef}           // useRefでusername入力欄への参照
        />
      </div>
      <div style={{margin: '20px', display: 'flex', alignItems: 'center', gap: '20px'}}>
        <p>password: </p>
        <TextField
          error={passError}
          helperText={passError ? "8~16文字入力してください" : ''}
          size='small'
          onChange={passHandleChange}
          inputRef={passwordRef}           // useRefでpassword入力欄への参照
        />
      </div>
      <button onClick={handleClick} style={{marginTop: '30px'}}>ログイン</button>
    </div>
  )
}

export default App

これでフロント側でのバリデーションチェック機能を実現できました。