React event.preventDefault()を使いながらInputタグ内でrequiredを使用するには

Question

import  React from 'react'

export default class ProductForm extends React.Component {
  constructor(props) {
    super(props)
  }

  onSubmit = e => {
    e.preventDefault()
    const form = e.target.form
    const title = form.title.value
    const desc = form.desc.value
    const price = form.price.value
    this.props.add(title, desc, price)
  }

  render() {

    return (
      <div>
        <h1>ProductForm</h1>
        <form>
          <label>タイトル：</label>
          <input type="text" name="title" required/>
          <label>説明：</label>
          <input type="text" name="desc" required/>
          <label>価格</label>
          <input type="number" name="price" required/>
          <button type="submit" onClick={this.onSubmit}>追加</button>
        </form>
      </div>
    )
  }
}

e.preventDefault()を使用した状態ではrequiredなどのバリデーションが使えないことはわかりました。

しかし、e.preventDefault()を残したままrequiredなどのバリデーション機能を付与したいのですが、どのように書くべきなのでしょうか？
何卒よろしくお願い致します。

Answer 1

サンプル

    e.preventDefault();
    e.target.form.querySelectorAll('input').forEach(e => e.setCustomValidity(""));

    const invalid = e.target.form.querySelectorAll('input:invalid');
    invalid.forEach(e => e.setCustomValidity("NG"));

    if ( invalid.length == 0 ){
      //...
    }

とかはどうでしょうか？

JavaScript を使用したフォーム検証 | クライアント側のフォームデータ検証 - ウェブ開発を学ぶ | MDN

Comments

[pokerStars]

ご返信遅れて申し訳ございません！
こちらで試してみたところformに値を入力しないとeventが反応しないようになりました！
格formごとにバリデーションエラーメッセージを表示するやり方はまだわかりませんが、色々模索していこうと思います！
ありがとうございました><