javascriptを使ってformのテキストボックス(input[type=text])の入力チックを作ろう！

フォーム(form)の値を取得する場合、jQueryではval()メソッドやprop()メソッドを使います。

HTML

<form id="mailform" name="mailform" method="post" accept-charset="UTF-8">
<input type="text" name="text(必須)" id="email" size="40" class="mfp" />
<div id="errer_text(必須)" class="mfs_errer"></div>
<input type="button" value="submit" onClick="check(this.form)">
</form>

CSS

.mfs_errer{
 color: #C00;
}

jquery/javascript

function check(){
 var valary = $('#mailform input[type=text][name$="(必須)"]');
 //nameに(必須)をつけているテキストボックスだけを取得してきている
 jQuery.each(valary, function() {
  var value = $(this).val();
  var name = $(this).attr('name');
  if(value == "")
  $('#errer_' + replaceKakko(name)).text(removeHissu(name) + 'が入力されていません');
  else
  $('#errer_' + replaceKakko(name)).text('');
 });
 
}
//
function replaceKakko(str){
 str = str.replace('(','\\(');
 str = str.replace(')','\\)');
 return str;
}

function removeHissu(str){
 return str.substr(0,str.indexOf('(必須)'));
}

replaceKakkoメソッドは”()”がHTMLのid指定にそのまま使えないから取得できるようにリプレイスしています。

参考：jQueryのID指定に使える記号｜社内ITゲリラがWebで世界をめざす

removeHissuメソッドは'(必須)’を取り除くための処理です。

Related articles