フォームのバリデーションをパスしたら、ボタンを押せるようにしたい

前提・実現したいこと

新規登録フォームを作っています。
PHPとjQueryによるバリデーションチェックをパスしたら、投稿ボタンを押せるようにしたいのですが、知識も浅いためうまくいきません。

該当のソースコード

PHP
1<?php
2
3const ERROR_NAME = '１０文字以内で入力';
4const ERROR_EMPTY = '入力してください';
5const ERROR_MAIL = '正しい形式で入力';
6const ERROR_COMMENT = '４文字以上で入力';
7
8if (!empty($_POST)) {
9  $error = array();
10
11  $username = $_POST['username'];
12  $usermail = $_POST['usermail'];
13  $userpass = $_POST['userpass'];
14
15  if(empty($username)) {
16    $error['error_name'] = ERROR_EMPTY;
17  }
18  if(!empty($username)) {
19    if(strlen($username) > 10) {
20      $error['error_name2'] = ERROR_NAME;
21    }
22  }
23
24  if(empty($usermail)) {
25    $error['error_mail'] = ERROR_EMPTY;
26  }
27  if(!empty($usermail)) {
28    $reg_str = '/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/';
29
30    if (!preg_match($reg_str, $usermail)) {
31      $error['error_mail2'] = ERROR_MAIL;
32    }
33  }
34
35  if(empty($userpass)) {
36    $error['error_pass'] = ERROR_EMPTY;
37  }
38  if(!empty($userpass)) {
39    if(strlen($userpass) < 4) {
40      $error['error_pass'] = ERROR_COMMENT;
41    }
42  }
43
44  if(empty($error)) {
45    header('Location: index.html');
46    exit();
47  }
48}
49
50
51?>
52<!DOCTYPE html>
53<html lang="en">
54<head>
55  <meta charset="UTF-8">
56  <meta name="viewport" content="width=device-width, initial-scale=1.0">
57  <title>Document</title>
58  <link rel="stylesheet" href="style.css">
59</head>
60<body>
61<form action="" method="post">
62  <div class="form_g <?php if(!empty($error['error_name'] || $error['error_name2'])) echo 'has-error' ?>">
63    <label><span class="help-block">
64      <?php if(!empty($error['error_name'])) echo $error['error_name'] ?>
65      <?php if(!empty($error['error_name2'])) echo $error['error_name2'] ?>
66    </span>
67    <input type="text" name="username" class="username" placeholder="ユーザー名" value="<?php if(!empty($username)) echo $username ?>">
68    </label>
69  </div>
70  <div class="form_g <?php if(!empty($error['error_mail'] || $error['error_mail2'])) echo 'has-error' ?>">
71    <label><span class="help-block">
72      <?php if(!empty($error['error_mail'])) echo $error['error_mail'] ?>
73      <?php if(!empty($error['error_mail2'])) echo $error['error_mail2'] ?>
74    </span>
75    <input type="text" name="usermail" class="usermail" placeholder="メールアドレス" value="<?php if(!empty($usermail)) echo $usermail ?>">
76    </label>
77  </div>
78  <div class="form_g <?php if(!empty($error['error_pass'] || $error['error_pass2'])) echo 'has-error' ?>">
79    <label><span class="help-block">
80      <?php if(!empty($error['error_pass'])) echo $error['error_pass'] ?>
81      <?php if(!empty($error['error_pass2'])) echo $error['error_pass2'] ?>
82    </span>
83    <input type="password" name="userpass" class="serpassu" placeholder="パスワード" value="<?php if(!empty($userpass)) echo $userpass ?>">
84    </label>
85  </div> 
86  <button type="submit" value="signup" class="send">新規登録</button>
87</form>
88
89<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
90<script src="style.js"></script>
91</body>
92</html>

JavaScript
1const ERROR_EMPTY = '入力してください';
2const ERROR_NAME = '１０文字以内で入力';
3const ERROR_MAIL = '正しい形式で入力';
4const ERROR_COMMENT = '４文字以上で入力';
5
6$('.send').prop("disabled", true);
7
8$('.username').keyup(function() {
9let form_g = $(this).closest('.form_g');
10if($(this).val().length === 0) {
11  form_g.find('.help-block').text(ERROR_EMPTY);
12  form_g.addClass('has-error').removeClass('has-success');
13} else if($(this).val().length > 10) {
14  form_g.find('.help-block').text(ERROR_NAME);
15  form_g.addClass('has-error').removeClass('has-success');
16} else {
17  form_g.find('.help-block').text('');
18  form_g.addClass('has-success').removeClass('has-error');
19}
20});
21
22$('.usermail').keyup(function() {
23let form_g = $(this).closest('.form_g');
24
25if($(this).val().length === 0) {
26  form_g.find('.help-block').text(ERROR_EMPTY);
27  form_g.addClass('has-error').removeClass('has-success');
28} else if ($(this).val().length > 50 || !$(this).val().match(/^[-a-z0-9~!$%^&*_=+}{\'?]+(.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(.[-a-z0-9_]+)*.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}))(:[0-9]{1,5})?$/i)) {
29  form_g.find('.help-block').text(ERROR_MAIL);  
30  form_g.addClass('has-error').removeClass('has-success');
31} else {
32  form_g.find('.help-block').text('');
33  form_g.addClass('has-success').removeClass('has-error');
34}
35});
36
37$('.userpass').keyup(function() {
38let form_g = $(this).closest('.form_g');
39
40if($(this).val().length === 0) {
41  form_g.find('.help-block').text(ERROR_EMPTY);
42  form_g.addClass('has-error').removeClass('has-success');
43} else if ($(this).val().length < 4) {
44  form_g.find('.help-block').text(ERROR_COMMENT);
45  form_g.addClass('has-error').removeClass('has-success');
46} else {
47  form_g.find('.help-block').text('');
48  form_g.addClass('has-success').removeClass('has-error');
49}
50});
51
52$('input').change(function() {
53  let form_g = $(this).closest('.form_g');
54  if($('.has-success').length){
55    $('.send').prop("disabled", false);
56  } else {
57    $('.send').prop("disabled", true);
58  }
59})

CSS
1.send[disabled] {
2  background-color: #aaa;
3  cursor: not-allowed;
4}
5
6.has-error {
7  color: red;
8}
9
10.has-error span {
11  display: block;
12  padding-bottom: 10px;
13  color: #ff0000;
14}

試したこと

３項目の入力する箇所があり、それぞれエラーメッセージを表示するようにしています。
さらに、エラーの場合にhas-errorというクラスを与えて、エラーでない場合にhas-successというクラスを与えています。
最後にhas-successがあった場合、登録ボタンのdisabledをfalseにすればできるんではないか？と思いましたが、最後の構文の構成がわからず、inputからカーソルを外すとボタンが押せるようになってしまいます。

他の方法としては、グローバル変数を定義して、それぞれのfunction内でエラーが表示されるif文内で、
グローバル変数にfalseを代入、エラーじゃないelseの中でtrueを代入。
３つのfunctionが終わった後に、if文でfalseならボタンは非表示、trueなら表示としましたが、こちらはdisabeledのままで押せるようになりません。

この関数使えばいいよ、などヒントあったら教えていただきたいです。

補足情報（20/3/11追記）

上記のようなのをイメージしています。

https://logic-a.com/2013/05/22/submit_false_on_textbox_text_none/
ただ検索すると、入力される、という条件で投稿ボタンを出すものばかりなので、
それ以外の条件を入れることはできないのでしょうか。

m.ts10806

2020/03/10 09:11

htmlもご提示ください。あと、やったことは色々書いてあって分かりやすいのですが、結果「なにが起きたか」が書かれていません。「うまくいかない」は何も伝えない表現なので、起きた現象に修正してください

YYmd0525

2020/03/10 10:14

わかりました。追記いたします、よろしくお願いいたします。

x_x

2020/03/11 01:27

サーバー側でチェックするのですか？どのタイミングでバリデーションのためのフォームの内容を送信するのでしょうか？

YYmd0525

2020/03/11 08:47

最初から投稿ボタンを押せないようにして、jQueryでチェックして、そこで各バリデートをパスしたらボタンが表示される、というようにしたかったです。フォーム入力中にDBに問い合わせるというのは可能なのでしょうか？実際にProgateでは入力中にメールアドレスの重複チェックをしています。

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

回答2件

ベストアンサー

バリデーションチェックをパスしたら、投稿ボタンを押せるよう

ちょっと違うのでは？
投稿ボタンが押せないとバリデートが起動しないですよね？

codepen

投稿2020/03/10 11:29

編集2020/03/10 12:47

yambejp

総合スコア116724

YYmd0525

2020/03/10 12:58

投稿ボタンを押したあとのバリデーションチェックはPHP側で行い、 jQueryでは入力中のバリデーションチェックを行うので、投稿ボタンは関係ないのではと思っていましたが、間違っていますでしょうか？入力のバリデーションチェック（jQuery)をパスしたら投稿ボタンを押せるようにしたいです。PHP側は関係なく、、です。

yambejp

2020/03/10 13:59

投稿ボタンが押せないときに、何が不正なのかわからないですね？投稿ボタンを押して、バリデートして、送信が中断されるという流れじゃないと成り立たないような気がします

YYmd0525

2020/03/10 20:51

Progateの新規登録の画面をアップロードしてみたのですが、このような実装をイメージしてました。これはJavaScriptではないのでしょうか？

yambejp

2020/03/11 01:23 編集

初期状態で必須入力項目が明確でなくユーザーはどこに入力が不足しているかわからないのに送信ボタンは押せない状態ですユーザビリティが低くUIとしては二流ですがどうしてもそうしたいのですか？

yambejp

2020/03/11 01:45

codepenのサンプルアップデートしておきました。 testの方のsubmitの動作を確認してください

YYmd0525

2020/03/11 08:43

ありがとうございます。まさしく、これを実装したいと思っていました。ただ、やはりinputからカーソルが離れたらボタンが表示されるので、Progateのように入力途中に指定されたバリデートをパスしたらボタンが表示される、、というほうがいいですが yambeさんのコードもちょっと理解が追いついてないので勉強を続けたいと思います。ありがとうございました。

yambejp

2020/03/11 08:49

> 指定されたバリデートをパスしたらボタンが表示される validateの難しいところですねこれをやると、10文字以上入力する空のinputに一文字でも入れるとエラーがでてうざいですよね極端なチェックをさせないために一応changeイベントをトリガーにしてあります

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

登録済みかどうかをチェックするのであれば、専用の API を用意して Ajax で都度サーバーに問い合わせるということになります。
返ってくるまでラグがあるとか登録済みメールアドレスの存在チェックができてしまうという問題があるかもしれません。少なくとも質問のコードに挙げられているような形式チェックであれば HTML/JavaScript だけで完結するため問い合わせる必要はありません。
https://api.jquery.com/jQuery.ajax/

投稿2020/03/11 08:59

x_x

総合スコア13749