C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

HTML/jqueryで未入力チェックをしたい

[トピック内 11 記事 (1 - 11 表示)]  << 0 >>

■87584 / inTopicNo.1)  HTML/jqueryで未入力チェックをしたい
  
□投稿者/ 初心者です。 (1回)-(2018/06/11(Mon) 10:47:37)

分類:[JavaScript] 

HTML/jqueryを使用しています。

画面にテキストボックス×2、ドロップダウン、ラジオボタン×2を配置しています。
他にボタンを配置して、このボタンをクリックしたら上記の配置した内容を未入力または、選択されていないか全てこのボタン一つでまとめてチェックしたいです。

ご不明な点があれば追記したいと思います。

どなたかご教授の程、宜しくお願い致します。
引用返信 編集キー/
■87585 / inTopicNo.2)  Re[1]: HTML/jqueryで未入力チェックをしたい
□投稿者/ WebSurfer (1513回)-(2018/06/11(Mon) 11:05:50)
No87584 (初心者です。 さん) に返信

ご自分で書いたソースをアップしてください。

今の質問内容では丸投げ状態です。
引用返信 編集キー/
■87586 / inTopicNo.3)  Re[2]: HTML/jqueryで未入力チェックをしたい
□投稿者/ 初心者です。 (2回)-(2018/06/11(Mon) 11:18:51)
No87585 (WebSurfer さん) に返信
> ■No87584 (初心者です。 さん) に返信
>
> ご自分で書いたソースをアップしてください。
>
> 今の質問内容では丸投げ状態です。

すみません。ソース事態が分からない状態でありまして…

今、テキストボックスの部分だけ調べてやってみたところ

$(function(){
$("button").on("click".function(){
if($("input").val()==""){
$("#label").html("※未入力の項目があります。")
$("#label").css("color","red");
}else{
$("#label").html("");
}
});
});

このように記述してみたのですが、動きませんでした…

すみませんが、宜しくお願い致します。
引用返信 編集キー/
■87587 / inTopicNo.4)  Re[3]: HTML/jqueryで未入力チェックをしたい
□投稿者/ WebSurfer (1514回)-(2018/06/11(Mon) 12:12:57)
No87586 (初心者です。 さん) に返信

html 部分を含めた全体のソースコードをアップしてください。

テキストボックス以外の部分も頑張ってコードを書いてください。

学校の宿題とか会社の研修の課題もしくはそれに類するもののような気がしますが、
どうなんでしょう? もしそうなら先生・講師に聞けないのでしょうか?
引用返信 編集キー/
■87595 / inTopicNo.5)  Re[4]: HTML/jqueryで未入力チェックをしたい
□投稿者/ 初心者です。 (3回)-(2018/06/12(Tue) 09:47:42)
No87587 (WebSurfer さん) に返信
> ■No87586 (初心者です。 さん) に返信
>
> html 部分を含めた全体のソースコードをアップしてください。
>
> テキストボックス以外の部分も頑張ってコードを書いてください。
>
> 学校の宿題とか会社の研修の課題もしくはそれに類するもののような気がしますが、
> どうなんでしょう? もしそうなら先生・講師に聞けないのでしょうか?

今調べて他の部分もなんとか頑張っています。

会社の研修なのですが、講師の方は別の会社の方なので聞くことができず…
今週の木曜日までに仕上げないといけないのですが、調べても分からずという感じで…
引用返信 編集キー/
■87597 / inTopicNo.6)  Re[5]: HTML/jqueryで未入力チェックをしたい
□投稿者/ WebSurfer (1515回)-(2018/06/12(Tue) 11:18:00)
No87595 (初心者です。 さん) に返信

> 会社の研修なのですが、講師の方は別の会社の方なので聞くことができず…
> 今週の木曜日までに仕上げないといけないのですが、調べても分からずという感じで…

そういう事情であれば、自分で徹底的に調べて、自分で徹底的に試して、木曜日までに
自力で何が何でも完成させないと意味がないというようなことは、他人に言われるまで
もなく認識されていると思うのですが?



・・・と言うばかりでは何ですので、解決のためのヒントだけ書いておきます。

(1) アップされた jQuery のコードは構文としては 1 ヶ所を除いては合っていると思
  います。(カンマであるべきところがピリオドになっているという単純なタイプ
  ミスのようです) 

  注:あくまで jQuery のコードの構文としてはです。html ソースが絡んでくると
    話は別です。だから html ソースをアップしてくれと言ったのです。

(2) html ソースに対しての jQuery のセレクタの使い方が適切かどうかを考えましょう。
  $("input") は果たして適切かなど。

(3) 期待通りに動かない場合はスクリプトのデバッガを使って動きを確認しましょう。
  IE, Chrome, Firefox に付属の開発者用ツールではデバッガが利用できます。
引用返信 編集キー/
■87598 / inTopicNo.7)  Re[6]: HTML/jqueryで未入力チェックをしたい
□投稿者/ 初心者です。 (4回)-(2018/06/12(Tue) 11:37:38)
No87597 (WebSurfer さん) に返信
> ■No87595 (初心者です。 さん) に返信
>
>>会社の研修なのですが、講師の方は別の会社の方なので聞くことができず…
>>今週の木曜日までに仕上げないといけないのですが、調べても分からずという感じで…
>
> そういう事情であれば、自分で徹底的に調べて、自分で徹底的に試して、木曜日までに
> 自力で何が何でも完成させないと意味がないというようなことは、他人に言われるまで
> もなく認識されていると思うのですが?
>
>
>
> ・・・と言うばかりでは何ですので、解決のためのヒントだけ書いておきます。
>
> (1) アップされた jQuery のコードは構文としては 1 ヶ所を除いては合っていると思
>   います。(カンマであるべきところがピリオドになっているという単純なタイプ
>   ミスのようです) 
>
>   注:あくまで jQuery のコードの構文としてはです。html ソースが絡んでくると
>     話は別です。だから html ソースをアップしてくれと言ったのです。
>
> (2) html ソースに対しての jQuery のセレクタの使い方が適切かどうかを考えましょう。
>   $("input") は果たして適切かなど。
>
> (3) 期待通りに動かない場合はスクリプトのデバッガを使って動きを確認しましょう。
>   IE, Chrome, Firefox に付属の開発者用ツールではデバッガが利用できます。


本当にご丁寧にありがとうございます。

jquery:
$(function(){
//未入力チェック
$("button").on("click",function(){
var flag=0;
if($("input[name='shimei']").val()==""){
flag=1;
}
else if($("input[name='nenrei']").val()==""){
flag=1;
}
else if($("input[name='example']").val()==""){
flag=1;
}
else if($("input[name='radiobutton']").val()==""){
flag=1;
}
if(flag==1){
$("#label").css("display","");
$("#label").css("color","red");
return false;
}else{
$("#label").css("display","none");
}
});
});

HTML:
<form>
氏名<input type="text" name="shimei"/><p></p>
年齢<input type="text" name="nenrei"/><p></p>
出身地<select name="example">
<option value="tokyoto">東京都</option>
<option value="osakahu">大阪府</option>
<option value="miyagi">宮城県</option>
</select><p></p>
<span></span>
旅行がしたい<input id="radio1" name="radiobutton" type="radio"/><label for="radiobutton">はい</label>
<input id="radio2"name="radiobutton" type="radio"/><label for="radiobutton">いいえ</label><p></p>
<div id="hyoji" style="display:none;">・北海道 ・福岡 ・愛知</div><p></p>
<button>送信</button>
<span id="label" style="display:none;">※未入力の項目があります</span>
</form>

このような形でチェックを行うことができました。
ですが、全て入力、チェックをつけて送信ボタンを押すと入力、選択していた値がすべて消えてしまいます。
本当に初心者で申し訳ありません。
ご教授の程お願いできませんでしょうか?



引用返信 編集キー/
■87600 / inTopicNo.8)  Re[7]: HTML/jqueryで未入力チェックをしたい
□投稿者/ WebSurfer (1516回)-(2018/06/12(Tue) 14:10:40)
No87598 (初心者です。 さん) に返信

> このような形でチェックを行うことができました。

それでやりたいこと全てができているかは疑問ですが、「できました」と言うことなの
で、もうそちらの話は置いときます。

> ですが、全て入力、チェックをつけて送信ボタンを押すと入力、選択していた値がすべて消えてしまいます。

質問者さんの環境が不明ですので想像ですが、送信した後サーバーから返ってくる応答で
ブラウザが再描画され最初の画面に戻ってしまうからだろうと思います。

button 要素に type="button" を追加して試してみてください。



一つの疑問の解決が次の疑問を生んで、次から次へと Q&A を繰り返すということになると、
自分はフォローしきれません。そもそもそういうことの対応は講師にお願いすべきことだと
思うのですが・・・

なので、すみませんが自分はこれ以上お付き合いできません。

このスレッドでさらなる質問を続けることをご希望なら、他の回答者の方を期待してください。
引用返信 編集キー/
■87604 / inTopicNo.9)  Re[8]: HTML/jqueryで未入力チェックをしたい
□投稿者/ 初心者です。 (5回)-(2018/06/13(Wed) 08:42:20)
No87600 (WebSurfer さん) に返信
> ■No87598 (初心者です。 さん) に返信
>
>>このような形でチェックを行うことができました。
>
> それでやりたいこと全てができているかは疑問ですが、「できました」と言うことなの
> で、もうそちらの話は置いときます。
>
>>ですが、全て入力、チェックをつけて送信ボタンを押すと入力、選択していた値がすべて消えてしまいます。
>
> 質問者さんの環境が不明ですので想像ですが、送信した後サーバーから返ってくる応答で
> ブラウザが再描画され最初の画面に戻ってしまうからだろうと思います。
>
> button 要素に type="button" を追加して試してみてください。
>
> 何度もすみませんでした。ありがとうございました。
>
> 一つの疑問の解決が次の疑問を生んで、次から次へと Q&A を繰り返すということになると、
> 自分はフォローしきれません。そもそもそういうことの対応は講師にお願いすべきことだと
> 思うのですが・・・
>
> なので、すみませんが自分はこれ以上お付き合いできません。
>
> このスレッドでさらなる質問を続けることをご希望なら、他の回答者の方を期待してください。
解決済み
引用返信 編集キー/
■87605 / inTopicNo.10)  Re[9]: HTML/jqueryで未入力チェックをしたい
□投稿者/ WebSurfer (1517回)-(2018/06/13(Wed) 10:45:41)
No87604 (初心者です。 さん) に返信

終わりにするのはあなたの自由にして結構ですが、その前にせめてレスに対してのフィード
バックをしてからにしてください。そのレスというのは、

> 質問者さんの環境が不明ですので想像ですが、送信した後サーバーから返ってくる応答で
> ブラウザが再描画され最初の画面に戻ってしまうからだろうと思います。
>
> button 要素に type="button" を追加して試してみてください。

・・・です。
引用返信 編集キー/
■87606 / inTopicNo.11)  Re[10]: HTML/jqueryで未入力チェックをしたい
□投稿者/ 初心者です。 (6回)-(2018/06/13(Wed) 11:05:21)
No87605 (WebSurfer さん) に返信
> ■No87604 (初心者です。 さん) に返信
>
> 終わりにするのはあなたの自由にして結構ですが、その前にせめてレスに対してのフィード
> バックをしてからにしてください。そのレスというのは、
>
>>質問者さんの環境が不明ですので想像ですが、送信した後サーバーから返ってくる応答で
>>ブラウザが再描画され最初の画面に戻ってしまうからだろうと思います。
> >
>>button 要素に type="button" を追加して試してみてください。
>
> ・・・です。

申し訳ありませんでした。
実際にやってみたのですが、うまくいかなかったのでもう少し調べてみたいと思います。ありがとうございました。
解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ