kintone-React自習 10日目「React-kintone連携チュートリアル の作成」フォームバリデーションの追加

入力フォームにバリデーションを追加します。

バリデーションの追加

入力フォームの値の有無を判別するバリデーションを追加。
値が未入力の場合は、検収確認ボタンをdisabled=trueに設定します。

画面キャプチャ

Validation.ts

バリデーションは別ファイルからexportします。

interface Quantity {
  deliveryQuantity: number, // 納品数
  orderingQuantity: number // 発注数
}
export class Validation {
  static deliveryQuantity(quantity: Quantity) {
    const {deliveryQuantity, orderingQuantity} = quantity;
    console.log(`納品数：${deliveryQuantity}, 発注数：${orderingQuantity}`) // eslint-disable-line no-console
    if (deliveryQuantity < 0) { // 値がマイナスの場合
      return 'マイナスは入力できません。';
    } else if (deliveryQuantity > orderingQuantity) { // 納品数が発注数より多い場合
      return '納品数に発注数を超える数量は入力できません。';
    }else if (deliveryQuantity.toString() === '') {
      return '納品数欄が未入力です。';
    } else {
      return '';
    }
  }
}

App.tsx

App.tsxから利用します。

・・・
import { Validation } from "./Validation";
・・・
export default function App() {
  const [searchString, setSearchString] = useState(""); // 納品書番号入力フォーム
  const [isSearchDisabled, setIsSearchDisabled] = useState(true); // 検索ボタンdisabled制御。初期値はdisabled=true
  const [orderingQuantity, setOrderingQuantity] = useState(0); // 発注数
  const [deliveryQuantity, setDeliveryQuantity] = useState(0); // 納品数
  const [isSearch, setIsSearch] = useState(false); // 検索中状態表示
  const [message, setMessage] = useState({err: ''});

・・・
  const handleChange = ((event: any) => {
    event.preventDefault();
    if (event.target.name === 'deliveryQuantity') { // 納品数入力フィールド
      setDeliveryQuantity(event.target.value);
      const err = Validation.deliveryQuantity({
        'orderingQuantity': orderingQuantity,
        'deliveryQuantity': event.target.value
      });
      if (err) {
        setMessage({err});
        setIsConfirmDisabled(true); // エラー時は検収確認ボタンは無効化
        return event;
      } else {
        setMessage({err});
        setIsConfirmDisabled(false); // 正常時は検収確認ボタンを有効化
        return event;
      }
    } else if (event.target.name === 'search') { // 検索入力フィールド
・・・
    }
  });


・・・
        <form onSubmit={handleSubmit}>
          <span>納品書番号入力：</span>
          <input
            type="text"
            name="search"
            value={searchString}
            ref={numberOfDeliveryInput}
            autoFocus={true}
            onChange={handleChange}
          />
          <button
            type="submit"
            name="search"
            disabled={isSearchDisabled}
            value="search">
            検索
          </button>

入力フォームのchangeイベントにハンドラ関数を設定します。
納品書番号入力フォームが空の時は、ボタンを無効化に設定します。

参考：

イベント処理 – React

フォーム – React