• ベストアンサー

フォームへの入力リアルタイムチェック

現在、メールフォームを作成しております、 プルダウン、チェックボックス、ラジオボタン、テキストエリア を利用しておりますが、リアルタイムチェックし、 入力・選択に入力がない、選択がない、入力内容に問題がある場合は、 独自の画像（×等）＋エラーテキストを表示し、 問題がなければ、○の画像＋エラーテキストを非表示にしたいです。 おすすめなライブラリなどはございませんでしょうか。

noname#202682
noname#202682

質問者が選んだベストアンサー

  • ベストアンサー
  • shockatz
  • ベストアンサー率80% (153/191)
回答No.1

knockout.jsが最適かと思います。 日本語版解説 ttp://kojs.sukobuto.com/ 本家 http://knockoutjs.com/

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ジャバスクリプト　入力項目チェック

    アンケートフォームを作成していて、入力必須項目とそうでないのがあります（そうでないものはすべてテキストエリア）。 必須項目は ・テキスト入力 ・4つのラジオボタンの中から1つを選ぶ ・プルダウンから1つを選ぶ があります。 テキスト入力では、電話番号、郵便番号、メールアドレス、の正規入力（半角英数で、@抜けチェック）を促したいのです（必須項目で未入力、未選択、誤表記があった場合、エラー画面が出るように）。 なかななかこれらの条件を満たしたジャバスクリプトソースを公開しているところがなくて困っています。 独学するにはちと時間がなく、あちこちのサイトをあたっているのですが、部分的には成功してもなかなか全部スッキリ決まりません。 どなたかお教えくださる方、よろしくお願いします。

  • 少々複雑なフォームのコーディング

    質問をお願い致します。 ただ今少し複雑なフォームのコーディングをしております。 Javascriptを使って構築したいと思っています。 1.プルダウン 選択肢１を選ぶ⇒プルダウン２が表示され小項目を選択 選択肢２を選ぶ⇒プルダウン２は表示されない 選択肢３を選ぶ⇒プルダウン２が表示され小項目を選択 選択肢４を選ぶ⇒テキストボックスが表示され、テキストを入力できる 2.チェックボックス⇒テキストボックス チェックを入れる⇒テキストボックスが出現 チェックを外す⇒テキストボックスは消える 初心者のため、どなたがご教示頂けますと助かります。 どうぞよろしくお願い致します。

  • フォームの入力チェック方法

    現在、アンケートフォームを作成しています。 チェックボックス、ラジオボタン、プルダウンを複数設定していますが 必須としている設問に関して未選択のまま送信ボタンを押した場合、警告ダイアログボックスを表示させるにはどのようなJavaScriptを設定すればいいでしょうか？ JavaScriptについては全く素人の為、どなたか助けてください。 お願いします。

  • 入力フォームの作成について

    現在、入力フォームを作成しています。 テキストボックス「Ａ」 ラジオボタン（またはチェックボックス）「１」「２」「３」 テキストボックス「Ｂ」 Ａのテキストボックスに文字を入力し、ラジオボタン（またはチェックボックス）の２を選択した時のみにＢにＡの内容をコピーさせるにはどのように記述すればよろしいでしょうか。 JavaScript 関係の書籍を読みましたが、具体的に書いてあるものはなく、組み合わせが必要だとは思うのですが、うまくいきません。 webでも調べてみましたが、テキストボックスに入力するとラジオボタンがチェックされるというのは見つけましたが、この質問のことは見つけられませんでした。 逆に言えば、難しいということでしょうか・・・ 以上、よろしくお願いします。

  • フォームのリアルタイム入力チェック

    現在、下記ソース（他のサイト様を参考）に送信時に入力チェックを行い、 エラーがあれば、送信されないようものを使っております。 送信時に加え、入力時に入力項目のみをリアルタイムに入力判定を行いたいです、 入力時にリアルタイムに行うためには、どのようにすればいいのでしょうか。 エラーがあれば、下記のように隠しているメッセージなどが表示され、 問題がなければ、表示させないまたは、表示されているエラーメッセージを隠す。 で構いません。 よろしくお願い致します。 ・htmlファイル <div id="notice-form" style="display: none; color: red;"> 【必須項目に未入力があります】</div> <form name="mailform" method="post" action="index.php" onsubmit="return formCheck()"> <!--テキスト--> <div id="text1" style="display: none; color: red;"> 【text1入力して下さい】</div> <input type="text" name="text1" /><br /> <div id="text2" style="display: none; color: red;"> 【text2入力して下さい】</div> <input type="text" name="text2" /><br /> <div id="text3" style="display: none; color: red;"> 【text3入力して下さい】</div> <input type="text" name="text3" /><br /> ・JSファイル function formCheck(){ var flag = 0; if(document.mailform.text1.value==""){ flag = 1; document.getElementById('text1').style.display="block"; }else{ document.getElementById('text1').style.display="none"; } if(document.mailform.text2.value==""){ flag = 1; document.getElementById('text2').style.display="block"; }else{ document.getElementById('text2').style.display="none"; } if(document.mailform.text3.value==""){ flag = 1; document.getElementById('text3').style.display="block"; }else{ document.getElementById('text3').style.display="none"; } if(flag){ document.getElementById('notice-form').style.display="block"; return false; }else{ document.getElementById('notice-form').style.display="none"; return true; } }

  • マクロ　フォームでのチェックボックスについて

    教えてください。 １）フォームでテキストボックス２つ、ボタンで新しい入力フォーム表示 ２）入力フォームでチェックボックス6個、コンボボックス6個を作ります。 ３）チェックボックスにチェック（1個のみ）したら、１）のフォームのテキストボックスにチェックされた、項目とコンボボックスで選択された内容が転記したい。 例）果物にチェック、コンボでブドウと選択 　テキストボックス→果物　ブドウ というようにフォームに転記させたい。 以前、シートでのマクロを教えていただきましたが、フォームだと頭が混乱してしまいました。 簡単で良いので、マクロの記述を教えてください。

  • 選択肢によって入力必須が変わるフォームの入力チェックJavaScrip

    選択肢によって入力必須が変わるフォームの入力チェックJavaScript フォームの入力チェックのJavaScriptを作成しています。 特定のラジオボタンにチェックを入れた場合のみ、 入力必須になるテキストボックスの 入力チェックJavaScriptを教えてください。 ラジオボタンが複数あるフォームで、 <input type="radio" name="type" value="type1" /> <label>タイプ1</label> <input type="radio" name="type" value="type2" /> <label>タイプ2</label> タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。 <input type="text" name="name1" /> テキストボックスが空白だった場合にアラートを出すJavaScriptは 現在このようになっています。 （参考にしていたサイトがあるのですが、忘れてしまいました・・・。） $(function(){ $("form1").submit(function(){ if($("input[name='name1']").val()==""){ $("input[name='name1']").css("border","1px solid #A70F00"); alert('必須項目に未入力があります'); return false; }) }) このJavaScriptをさらに、if文で括って、 name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。

  • フォームで入力した値を別のフォームにコピーする

    はじめまして！ javascriptでフォームAに入力した内容を ボタンが押されたら同一ページのフォームBに ペーストされるscriptを作りたいのですが そういったスクリプトを公開しているものがあれば 教えていただきたいです。よろしくお願いいたします。 やりたい事： [フォームA]--------------------- 　お名前：テキスト 　性別：ラジオボタン 　趣味：セレクトボックス 　コメント：テキストエリア 　[コピーボタン]←内容をコピーするボタン -------------------------------- ↓コピーボタンが押されたら↓ [フォームB]--------------------- 　お名前：テキスト 　性別：ラジオボタン 　趣味：セレクトボックス 　コメント：テキストエリア -------------------------------- Aフォームに入力した内容Bフォームに反映される よろしくお願いいたします。

  • フォームに入力したデータの受け渡しについて

    左右に分かれたフレームを使用したページ作成を検討しています。 左フレーム内のフォームへ入力したテキストやチェックボックスのデータを、 右フレームに設置した1つのテキストエリアへコピーボタンで受け渡しを行う方法を探しています。 テキストボックス1行だけの受け渡しはできるのですが、 複数のテキストエリアやチェックボックスを使用した場合の受け渡し方法をご教示いただきたけますでしょうか？ 左フレームとしては↓のような内容を想定しています。 <html> <form> テキスト：</br> <input type="text" name="aaa" /></br> ラジオ：</br> <input type="radio" name="bbb" value="radio1" checked="checked" /> ラジオ1 <input type="radio" name="bbb" value="radio2" /> ラジオ2</br> チェック：</br> <input type="checkbox" name="ccc" value="check1" /> チェック1 <input type="checkbox" name="ccc" value="check2" /> チェック2</br> 選択項目：</br> <select name="ddd"> <option>Ａ</option> <option>Ｂ</option> </select></br> テキストエリア</br> <textarea name="eee" rows="2" cols="15">テキストエリア1</textarea> </br> <input type="submit" value="送信" />　 <input type="reset" value="リセット" /> </form> </html> よろしくお願いいたします。

  • プルダウンの選択項目がテキスト入力フォームに自動で入力される

    プルダウンで選択した項目がテキスト入力フォームに自動で入るようにしたいのです。教えていただけますでしょうか？ 以上、よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する