【JS】よくわかるJavascriptの教科書2

簡単なフォームの入力チェックを勉強しました。 サンプル ** html

|html|

お名前必須

性別必須

男性 女性

年齢

||< htmlタグについて全く知らなかったのでこの範囲を理解するレベルで調べました。 dl,dd,dt 定義リスト。その名の通り用語とその定義を記述するためのもの。dtがtermでddがdescription、それをdlでlistするイメージ。ここでは項目名とフォームをセットにするために使ってます。 HTMLタグについて定義リスト<dl><dt><dd>を使いこなす！ | ホームページビルダー私でも出来たホームページ label いままでlabelなんて使わずにフォームを作っていたのですが、なるほどラジオボタンやチェックボックスはこれがないとダメですね！labelで指定した場所をクリックすればラジオボタンを選択出来ます。 label?????? ｜ ????????? *** p,div,span いつもはdivやpをよく目にしてたのですが、spanなんてのもあるらしく…。ブロック要素かインライン要素か、またどんな要素を含むことができるか等で違いがあるようです。 p要素、div要素、span要素のそれぞれの違い | TechMemo

|javascript| // name $('input[name=myname]').bind('blur', function() { if ($(this).val() === '') { $(this).addClass('error').parent().append('

※この項目は必ずご記入ください

'); } }) .bind('focus', function() { if ($(this).next() !== false) { $(this).removeClass('error').next().remove(); } });

// gender $('input[name=gender]').parents('dd').append('

※この項目は必ずお選びください

').end() .bind('change', function() { if($('input[name=gender]:checked').val() !== '') { $(this).parents('dd').find('.error').remove(); } });

// age $('input[name=age]').bind('blur', function() { $(this).parent().find('.error').remove(); if(isNaN($(this).val())) { $(this).addClass('error').parent().append('

※この項目は数値でご記入ください

') } }) .bind('focus', function() { if ($(this).next() !== false) { $(this).removeClass('error').next().remove(); } }); ||< jQueryの入門です。やっていることは名前が空欄のままフォーカスが外れたらエラー、性別が選択されていないとエラー、年齢に数字以外が入力されたままフォーカスが外れたらエラーです。 jQueryでだいぶ簡単に書けるとはいえそこそこ複雑ですね！