ここから本文です

JavaScript以下のソースの修正をしていただきたいです。 JavaScriptを使った入...

min********さん

2018/5/2217:00:03

JavaScript以下のソースの修正をしていただきたいです。

JavaScriptを使った入力チェックについて。「全角文字」「メールアドレス」のチェックを行いたいのですが上手くいきません。

うまくいかない点
1、フォーカスアウトした際にエラーチェックは行われるが、正しく入力を修正された際にエラーが出続ける。
2、全角がひらがな・カタカナだけでなく感じもチェック項目に入れたい。
3、メールアドレスのチェック(1つ目)でエラーが出た際、エラーの表示+入力された文字自体に赤文字になってしまう
4、エラー表示が出た際、「全角文字」「メールアドレス」が消され、エラー表示により上書きされる為、テキストボックスの上または下に表示させたい。

==========以下html==========
<form action="contact_2" method="post">

<p>名前</p>
<input type="text" name="input_name" /><br /><br />

<p>本文</p>
<textarea name="honbun" rows="4" cols="40"></textarea><br /><br />
<br />

<p>全角文字</p>
<input type="text" name="zenkaku" value="" onblur="myFnc();"/><br /><br />
<br />

<p>メールアドレス</p>
<input type="text" name="mailaddress" value="" onblur="myFnc();"/>
@<input type="text" name="mailaddress2" value="" onblur="myFnc();"/><br /><br />
<br />

<input type="submit" value="送信" />

</form>
==========以上==========

==========以下html2==========
<form action="contact_3" method="post">
<?php // TODO 入力された値を表示 ?>
<input type ="hidden" name = "input_name" value ="<?= $input_name ?>" />
<input type ="hidden" name = "honbun" value ="<?= $honbun ?>" />
<input type ="hidden" name = "zenkaku" value ="<?= $zenkaku ?>" />
<input type ="hidden" name = "mailaddress" value ="<?= $mailaddress ?>" />
<input type ="hidden" name = "mailaddress2" value ="<?= $mailaddress2 ?>" />

<p>名前</p>
<p><?= $input_name ?></p>

<p>本文</p>
<?php // TODO 入力された値を表示 ?>
<p><?= $honbun ?></p>

<p>全角文字</p>
<p><?= $zenkaku ?></p>
<br />

<p>メールアドレス</p>
<p><?= $mailaddress ?>@<?= $mailaddress2 ?></p>
<br />
==========以上==========
==========以下JavaScript==========
/**
*
*/
$(document).ready(function() {


// 全角文字
$("input[name='zenkaku']").focusout(function(){
if(!$(this).val().match(/^[\u3040-\u30ff]+$/)){
$(this).prev().html('※全角文字のみです');
$(this).prev().css('color','red');
}
});


// メールアドレス
$("input[name='mailaddress']").focusout(function(){
if(!$(this).val().match(/([a-zA-Z0-9][a-zA-Z0-9_.+\\-]*)@(([a-zA-Z0-9][a-zA-Z0-9_\\-]+\\.)+[a-zA-Z]{2,6})/)){
$(this).prev().html('※正しいメールアドレスを入力してください。');
$(this).prev().css('color','red');
}
});

// メールアドレス
$("input[name='mailaddress2']").focusout(function(){
if(!$(this).val().match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)){
$(this).prev().html('※正しいメールアドレスを入力してください。');
$(this).prev().css('color','red');
}
});

});

==========以上==========

閲覧数:
104
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

shimixさん

2018/5/2217:40:25

>正しく入力を修正された際にエラーが出続ける。

エラーメッセージを表示する条件に一致しない場合には、エラーメッセージを「空白」で表示すればいいんじゃないかと思います。

# if 条件でやっていますから、else でやるだけですよね


>感じもチェック項目に入れたい。

「JavaScript 全角文字」で検索すればチェック条件はHitします。

http://tokyo-wabisabi-boys.net/blog/javascriptjquery/js-string-rege...



>エラーの表示+入力された文字自体に赤文字になってしまう
>テキストボックスの上または下に表示させたい。

$(this).prev() などとせずに表示する箇所をキチンと定義して、そこに表示するようにすればいいんじゃないかと思います。

質問した人からのコメント

2018/5/29 08:08:25

回答ありがとうございます!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる