質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1667閲覧

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

YYmd0525

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/03/10 08:45

編集2020/03/10 20:50

前提・実現したいこと

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

該当のソースコード

PHP

1<?php 2 3const ERROR_NAME = '10文字以内で入力'; 4const ERROR_EMPTY = '入力してください'; 5const ERROR_MAIL = '正しい形式で入力'; 6const ERROR_COMMENT = '4文字以上で入力'; 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 = '10文字以内で入力'; 3const ERROR_MAIL = '正しい形式で入力'; 4const ERROR_COMMENT = '4文字以上で入力'; 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}

試したこと

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

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

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

補足情報(20/3/11追記)

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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では入力中にメールアドレスの重複チェックをしています。
guest

回答2

0

ベストアンサー

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

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

投稿2020/03/10 11:29

編集2020/03/10 12:47
yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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イベントをトリガーにしてあります
guest

0

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

投稿2020/03/11 08:59

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問