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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

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

jQuery

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

HTML

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

Q&A

解決済

3回答

3342閲覧

【JavaScript; jQuery;】onSubmitでループを回して未入力チェックをしたい

MaShiRo_H

総合スコア328

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

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

jQuery

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

HTML

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

0グッド

0クリップ

投稿2016/06/20 03:49

こんにちは。
いつもお世話になっています!

現在入力フォームを作成しており、submit時に未入力チェックを行いたいのですが、うまく動作しないため相談させていただきます。

正しい動作としては
前提:<input type="text"...>をループで取得
(1). 複数ある<input type=text ...>の中に一つでも未入力のものがある場合に「未入力の項目があります」とアラートを出し、submitを中断
(2). 全て入力されている場合にのみ通常どおり送信
なのですが、現在(1)のときはアラートは出るもののその後なぜかsubmitが中断されません。
(2)はうまく動作しております。

以下、コードを記載いたしますのでご確認をお願いいたしますm(_ _)m

JavaScript

1 function check(){ 2 $(function(){ 3 var $input = $(".hoge").find("input[type='text']"); 4 for(i = 0; i < $input.length; i++) { 5 if ($input[i].value.length == 0) { 6 alert("未入力の項目があります"); 7 return false; 8 } 9 } 10 }); 11 }

HTML

1<%= form_for @foo, html: {id: 'form', multipart: true, onSubmit: "return check();"} do |f| %> 2... 3<%= f.submit "登録", :class => "form__button" %> 4

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

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

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

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

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

kei344

2016/06/20 04:20

出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。
guest

回答3

0

@masaya_ohashiさんの「check内で直接リターンしていないからです。」とのお言葉にヒントをいただきました!
以下の記述でうまく動きましたのでご報告いたしますm(_ _)m

javascript

1ご回答ありがとうございますm(_ _)m 2 3 function check(){ 4 var flag = 0; 5 $(function(){ 6 var $input = $(".hoge").find("input[type='text']"); 7 for(i = 0; i < $input.length; i++) { 8 if ($input[i].value.length == 0) { 9 alert("未入力の項目があります"); 10 flag = 1; 11 } 12 } 13 }); 14 if(flag == 1) { 15 return false; 16 } 17 }

投稿2016/06/20 04:16

MaShiRo_H

総合スコア328

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

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

MaShiRo_H

2016/06/20 04:54

どうやら以下のように、$(function(){});で囲う記述の方が正しいようです。 (HTMLのonSubmit: "return check()"は外しました) きちんと動作いたしました! $("#foo").submit(function(){ var flag = 0; var $input = $(".hoge").find("input[type='text']"); for(i = 0; i < $input.length; i++) { if ($input[i].value.length == 0) { alert("未入力の項目があります"); flag = 1; break; } } if(flag == 1) { return false; } });
guest

0

ベストアンサー

check内で直接リターンしていないからです。
このタイミングで$(function(){})で挟む必要性はないですね。

Javascript

1function check(){ 2 var $input = $(".hoge").find("input[type='text']"); 3 for(i = 0; i < $input.length; i++) { 4 if ($input[i].value.length == 0) { 5 alert("未入力の項目があります"); 6 return false; 7 } 8 } 9 return true; 10}

###余談
そもそもjQuery等をわざわざ使わなくとも、requiredを使えばブラウザ側で勝手に未入力を検知して送信を止めてくれます。まあ、ブラウザによって動作が異なるので自力でやるのが確実ではありますが。
http://www.w3schools.com/tags/att_input_required.asp
ついでに、patternを使えば「数字だけ」「英語だけ」「電話番号の形式だけ」「メールアドレスの形式だけ」等の制限もjQueryなしでつけれます。
http://www.w3schools.com/tags/att_input_pattern.asp

投稿2016/06/20 03:58

編集2016/06/20 04:01
masaya_ohashi

総合スコア9206

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

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

MaShiRo_H

2016/06/20 04:11

ご回答ありがとうございます! 以前上記でも試したのですが、その時はそもそもアラート自体(恐らく関数内全て)が作動せずに、今回も同様でした>_< 以下のサイトを参考に、関数内でjQueryを呼び出して実行すると、相談時のような挙動になりました。 やはりjQueryを使わずに全てjsで書いた方がよいのでしょうか.. http://qiita.com/glaytomohiko/items/19159be555c6ba86a13a 【余談】拝見いたしました! required、何やらよさげですね。 もう少し調べてみようと思います!m(_ _)m ありがとうございます!
masaya_ohashi

2016/06/20 04:19 編集

まず第一に、jQueryを使わず全てjsで書いたほうがよいことは99.9%ありえません。圧倒的にjQueryを使うほうが楽です。 そして、あなたが調べた$(function(){})の使い方は、「コード全体」を囲む使用方法が正しいです。jsファイルの先頭行に「$(function(){」と書いて、末尾に「});」と書く呪文のようなものです。今のように「関数の中のコード」だけを囲むものではありません。 あなたの参考にしたそのページ、ちゃんとコメント欄まで読んでみてください。同じことが言われています。参考にしたページが悪かったですね。
MaShiRo_H

2016/06/20 04:52

おおお、本当ですね。。 ちゃんと最後まで読んでいませんでした>< 後の方のためにも、コード修正しておきます! ありがとうございます!
guest

0

たぶんですが、Jquery とごっちゃになっているような・・

function check(){
var $input = $(".hoge").find("input[type='text']");
for(i = 0; i < $input.length; i++) {
if ($input[i].value.length == 0) {
alert("未入力の項目があります");
return false;
}
}
}

これで onSubmit="check()" で動作するんじゃないでしょうか。

投稿2016/06/20 03:58

YK1037

総合スコア236

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

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

MaShiRo_H

2016/06/20 04:08

ご回答ありがとうございます! 以前上記でも試したのですが、その時はそもそもアラート自体(恐らく関数内全て)が作動せずに、今回も同様でした>_< 以下のサイトを参考に、関数内でjQueryを呼び出して実行すると、相談時のような挙動になりました。 やはりjQueryを使わずに全てjsで書いた方がよいのでしょうか.. http://qiita.com/glaytomohiko/items/19159be555c6ba86a13a
YK1037

2016/06/20 04:17

;(function($) { $.fn.関数名 = function( tag = 引数 ) { $(tag).on('load' , function(){ beforeVal = $(tag).val(); }); }; })(jQuery); 上記はJquery関数の参考例です。 Jqueryの方が、使い勝手が良い場合もあるので ケースバイケースだと思います。 デバッカーの使い方はわかりますでしょうか? IE(自分はIEです) Chrome などで、 1行毎にどう動いてるか動作確認が可能です。 IE では開発ツール(F12)を使用すると 何が原因か直ぐにわかるかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問