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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

解決済

2回答

1596閲覧

formタグへのjQueryの複数条件チェックについて

nagano0141cafe

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2020/07/18 12:48

閲覧ありがとうございます。
下記問題を解決するのにご助言をいただきたいです。

前提・実現したいこと

if条件を2つともクリアした際、正常に処理が完了したことを確認するためにコンソール(正常のテキスト)をコンソールに表示させたいです。

発生している問題・エラーメッセージ

エラーメッセージは表示されていません。
現在起きている問題として、jQueryのif文に表記されている2つの条件をクリアしても、elseに指定している処理(コンソールに正常の文言を表示)が実行されていない状況です。
想定では条件2つがクリアしていればsubmitのボタンを押下時に、コンソールへ正常のテキストが表示されるかなと思っているのですが...

該当のソースコード

html

1<form class="match" action="index.html" method="post"> 2 <table class="wrap"> 3 <tr class="postal"> 4 <th>郵便番号</th> 5 <td><input type="text" name="postal_code" class="postal__form" value=""></td> 6 <p class="error_postal">郵便番号の形式が正しくありません。</p> 7 </tr> 8 </table> 9 <input type="submit" name="submit" class="check_btn" value="入力チェック"> 10</form>

css

1.wrap { 2 text-align: left; 3 margin-top: 2%; 4} 5.postal__form { 6 margin-left: 5%; 7} 8.error_postal { 9 display: none; 10 color: #f00; 11} 12.check_btn { 13 background-color: #dcf; 14 border: 1px solid #333; 15 border-radius: 1.7em; 16 box-sizing: border-box; 17 padding: 8px; 18 margin-top: 2%; 19}

jQuery

1$(function(){ 2 $('input[name=submit]').on('click', function(){ 3 4 var postalcode = $('input[name=postal_code]').val(); 5 6 //郵便番号未入力時、もしくは半角数字以外入力時にエラー表示 7 if((postalcode == "") || (!postalcode.match(/^\d+$/))){ 8 $('.error_postal').fadeIn('fast'); 9 return false; 10 //いずれも問題ない 11 } else { 12 console.log('正常'); 13 return true; 14 } 15 }); 16});

お手数ですが、修正部分をご指摘いただけると幸いです。

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

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

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

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

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

guest

回答2

0

ベストアンサー

期待通りに正常と出力されているように見えます。
https://jsfiddle.net/2qwn6vLh/1/show

ところで、これは蛇足ですがHTML5からはpattern属性を使うと正規表現で入力形式を指定できま
す。

HTML

1<input type="text" name="postal_code" class="postal__form" value="" pattern="^\d+$">

投稿2020/07/18 12:59

magf

総合スコア212

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

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

nagano0141cafe

2020/07/19 06:53

ご確認ありがとうございます。 html5の新機能全部把握しきれていないのでご指摘非常にありがたいです! 次回からの制作物で正規表現つける場合はそのようにさせていただきます! ありがとうございました!
guest

0

submitした場合は、画面がレンダリングされるので、onClick移行の処理は実行されていないです。

Form関連でJSを実装したい場合は、 type="submit"ではなくtype="button"を使用します。
if文でいうと正常の場合にJSでsubmit()を実行します。

投稿2020/07/18 14:31

編集2020/07/18 14:34
FrontEnd_Japan

総合スコア271

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問