html5 フォームのバリデーションでrequiredチェックをsubmitボタン以外の操作で行いたい

前提・実現したいこと

html5でメールフォームのバリデーションを行っています。

その際必須入力チェックは<input required>で行おうとしているのですが、この処理をsubmitボタンを押下する以外で発火させる方法はあるのでしょうか？

たとえばリンクや<input type="button">をクリックした場合、submit処理は行わず、requiredチェックのみが行われるようにしたいと考えています。

JavaScriptなどに詳しくないため、そもそもできるのかどうかもわからず、質問させていただきました。
よろしくお願いいたします。

該当のソースコード

html

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>requiredチェック</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form action="#" method="post"> <input id="id_name" name="name" type="text" required> <button type="button" id="id_button">requiredチェック</button> </form> </body> </html>

追記

2018/08/23 2:46

<input type="button">をクリックした際、下記のようになればと考えています。

行動規範の内容に同意します

回答2件

ベストアンサー

jQueryで愚直にやるなら、こういう感じじゃないかな

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>requiredチェック</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form action="#" method="post">
    <input id="id_name1" name="name" type="text" required>
    <input id="id_name2" name="name" type="text" required>
    <input id="id_name3" name="name" type="text" required>
    <button type="button" id="id_button">requiredチェック</button>
</form>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $("#id_button").on("click", function () {
        $("input[required]:invalid").each(function () {
            $(this).css("background-color", "red");
        });

        $("input[required]:valid").each(function () {
            $(this).css("background-color", "white");
        });
    });
</script>
</body>
</html>

追記

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>requiredチェック</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form action="#" method="post">
    <input id="id_name1" name="name" type="text" required>
    <input id="id_name2" name="name" type="text" required>
    <input id="id_name3" name="name" type="text" required>
    <button type="button" id="id_button">requiredチェック</button>
</form>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $("#id_button").on("click", function () {
        $(this).parent("form").get(0).reportValidity();
    });
</script>
</body>
</html>

投稿2018/08/22 17:26

編集2018/08/22 18:09

bwz61366

総合スコア2009

kuichi

2018/08/22 17:50

ありがとうございます。申し訳ありません、説明が足りなかったようです。追記した画像の状態にしたいと考えています。ただ、これがそもそも無理であれば、教えていただいた方法をヒントにフォーム部品に対してバリデーションの処理をしたいと思います。

kuichi

2018/08/22 18:13

ありがとうございます！試してみたら無事にできました！

行動規範の内容に同意します

私なら input イベントと Form Validation API を組み合わせて書きます。

https://codepen.io/anon/pen/pOJEvQ

html
1<form>
2  <input id="email" type="email" required />
3  <div id="message"></div>
4</form>

javascript
1const email = document.getElementById('email')
2const message = document.getElementById('message')
3
4email.addEventListener('input', () => {
5  if (email.validity.valid) {
6    message.innerHTML = ''
7  } else {
8    message.innerHTML = email.validationMessage
9  }
10})