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

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

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

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

Q&A

解決済

2回答

1694閲覧

フォーム入力 正規表現と送信ボタンについて

mi_mi

総合スコア19

JavaScript

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

0グッド

1クリップ

投稿2018/10/16 14:31

編集2018/10/16 15:49

html

1<form> 2<p>・ユーザー名を入力(半角英数のみ)</p> 3<input id = "user"> 4<p id = "Error1"></p> 5<p>・パスワードを入力(半角英数のみ)</p> 6<input id = "password" > 7<p id = "Error2"></p> 8<input id = "buttom"type="submit" value="送信" disabled> 9</form>

javascript

1var usernameText = document.getElementById("user");//入力部分→ユーザー名 2 var Error1 = document.getElementById("Error1"); 3 4 usernameText.addEventListener("blur",function () 5 { 6 var userValue = document.getElementById("user").value; 7 if (/^[A-Za-z0-9]*$/.test(userValue)) 8 { 9 Error1.innerHTML = "合っています"; 10 } 11 else 12 { 13 Error1.innerHTML = "入力エラーがあります"; 14 } 15 }); 16 17 var passwordText = document.getElementById("password");//入力部分→パスワード 18 var Error2 = document.getElementById("Error2"); 19 20 passwordText.addEventListener("blur",function() 21 { 22 var pwValue = document.getElementById("password").value; 23 24 if (/^[A-Za-z0-9]*$/.test(pwValue)) 25 { 26 Error2.innerHTML = "合っています"; 27 } 28 else 29 { 30 Error2.innerHTML = "入力エラーがあります"; 31 } 32 }); 33 34 var buttom = document.getElementById("buttom"); 35 buttom.disabled = true;

前提・実現したいこと

●やりたい事
javascriptで送信formを作成しています。
ユーザー名とパスワードが入力され、
正規表現でチェックを受け、双方の値が正しい場合だけ送信ボタンを有効にしたいです。

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

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

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

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

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

kei344

2018/10/16 14:56

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
mi_mi

2018/10/16 15:51

keiさんありがとうございます。初めて使いましたので質問の仕方がわかりませんでした。アドバイスいただきありがとうございます。
m.ts10806

2018/10/16 21:20

kei344さんも書かれていますが、現在のコードでの問題点とか起きている現象を記載してください。わかっていること、いないこと、できていること、いないこと、ですね。 ブラウザかいはつつーる開発ツールのコンソールにエラーが出てないかとかも確認して追記してください
guest

回答2

0

ベストアンサー

pattern属性で指定できます。checkValidity()メソッドで妥当かどうかも判定できます。

HTML

1<input id="password" pattern="[A-Za-z0-9]*" />

JavaScript

1const form = document.forms[0]; 2form.addEventListener('input', function(event) { 3 const valid = form.checkValidity(); 4 document.getElementById('buttom').disabled = !valid; // スペリングミスはそのまま 5}, false);

CSS

1input:invalid { 2 outline: red solid 1px; 3} 4 5input:valid + #Error1::before, 6input:valid + #Error2::before { 7 content: '合っています'; 8} 9 10input:invalid + #Error1::before, 11input:invalid + #Error2::before { 12 content: '入力エラーがあります'; 13}

現状では空でも通るので、required属性も使ったほうがいいかもしれません。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation

投稿2018/10/17 02:19

x_x

総合スコア13749

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

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

0

pattern属性で解決いたしました!ありがとうございます。
質問の仕方等も勉強致します。

投稿2018/10/19 14:09

mi_mi

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問