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

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

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

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

jQuery

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

Q&A

3回答

5343閲覧

フォーム送信を無効化したい

tkshp

総合スコア174

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2018/02/01 08:07

編集2022/01/12 10:55

前提・実現したいこと

onclick属性のcheckOrder関数で、エラーチェックを行えば済む話なのですが、
onclick属性で呼び出してるcheckOrder関数は、htmlとは別のjavascriptファイルで違ったエラー処理を行っているので、
できればhtmlファイル内にもう1つのエラーチェックのjavascriptを記述して、引っかかったら、
フォーム送信をキャンセルさせてエラーメッセージを表示させたいと思っています。
onsubmitを無効化したつもりなのですが飛んでしまいます。
ご教授のほどお願いします。

該当のソースコード

<div id="adrs2err"></div> //ここにエラーメッセージを表示。 <div id="adrs4err"></div> //ここにエラーメッセージを表示。 <input type="image" id = "nextbtn" src="/img/btn.gif" value="次へ" onclick="return checkOrder( document.orderForm );"> <script type='text/javascript'> $('#nextbtn').click(function(){ (省略) var return_flag = true; if(adrsData2 == ''){ $("#adrs2err").html("<span style='color:red;font-weight:bold'>※名前が指定されていません。</span>"); return_flag = false; }else{ $("#adrs2err").html(""); } if(adrsData4 == ''){ $("#adrs4err").html("<span style='color:red;font-weight:bold'>※電話番号が指定されていません。</span>"); return_flag = false; }else{ $("#adrs4err").html(""); } if(return_flag == false){ $('form').attr("onsubmit", "return false"); } });

試したこと

$('form').attr("action", "#");

リロードしてしまうので、divのエラーメッセージが消えてしまう。

追記。

実行すると、$('#nextbtn').click(function(){よりも、
先にcheckOrderのエラーチェックがかかり、出力されます。
checkOrderが動いた後に、$('#nextbtn').click(function()内で、formのsubmit属性を変更しても遅いということでしょうか?

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

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

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

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

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

guest

回答3

0

HTML

1<input type="image" id = "nextbtn" src="/img/btn.gif" value="次へ"><!-- onclickは削除、clickの処理にまとめる --> 2 3<script type='text/javascript'> 4 $('#nextbtn').click(function(e){ // クリックイベントをeで受け取る 5 (省略) 6 var return_flag = true; 7 if(adrsData2 == ''){ 8 $("#adrs2err").html("<span style='color:red;font-weight:bold'>※名前が指定されていません。</span>"); 9 return_flag = false; 10 }else{ 11 $("#adrs2err").html(""); 12 } 13 if(adrsData4 == ''){ 14 $("#adrs4err").html("<span style='color:red;font-weight:bold'>※電話番号が指定されていません。</span>"); 15 return_flag = false; 16 }else{ 17 $("#adrs4err").html(""); 18 } 19 20 if(!return_flag) { 21 e.preventDefault(); // クリックをなかったことにする 22 } 23 else { 24 if(!checkOrder( document.orderForm )) { // inputタグのonclickではなく.clickで一緒に判定する 25 e.preventDefault(); // クリックをなかったことにする 26 } 27 } 28 29 }); 30</script>

e.preventDefault()という処理でクリックを「なかったこと」に出来ます。
しかしこれだとEnterキーでこの判定を無視して進むことが出来るので、本来.clickではなくformsubmitでやるべき処理です。

投稿2018/02/01 08:16

masaya_ohashi

総合スコア9206

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

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

0

$('form').attr("onsubmit", "return false");

すなおに、以下でいけませんか?

javascript

1$('form').on('submit', function(e){ 2 e.preventDefault(); 3});

追記

うまくいかないようなので、これでどうでしょう?

javascript

1$(function(){ 2 $(document).on('submit','form',function(e){ 3 e.preventDefault(); 4 }); 5}); 6

投稿2018/02/01 08:10

編集2018/02/01 08:53
yambejp

総合スコア114583

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

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

tkshp

2018/02/01 08:43

ご回答ありがとうございます。 試しましたが、飛んでしまいました。
yambejp

2018/02/01 08:54

読み込みのタイミングとformの動的状況がわからないので 追記の分で再チェックをお願いします
tkshp

2018/02/01 08:58

ready関数でなく、ボタンクリック時にエラーチェックを行い、問題あれば飛ばさないという処理にしたいので、 if(return_flag == false){ $(document).on('submit','form',function(e){ e.preventDefault(); }); } としましたが、飛んでしまいました。 ちなみにif(return_flag == false){でalertを取ったら、反応しています。
tkshp

2018/02/01 09:05

test2の出力がとれないことがわかりました。 if(return_flag == false){ alert("test1"); $('form').on('submit', function(e){ alert("test2"); e.preventDefault(); }); }
guest

0

別のJSで書いているという、
checkOrder()の中身、formに関連した処理も投稿に記載したほうがいいかと。
そちらも連動して悪さしてる可能性もなくはないと思うので。

投稿2018/02/01 09:04

miyabi_takatsuk

総合スコア9528

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問