HTML5を前提に、javascriptの入力チェックの部分がわかりません。


やりたいこと:
http://1811way.com/work008/test01.php
を見てください。

3番目のコメントはKJXという文字でなければ、
「入力文字が違っています。」
というメッセージを出して、
再度フォーカスがコメント欄へ行くようにしたい。

現在の問題
1度目の入力で、”KJX”という文字(正解の文字)を入力したときは
何も問題ありません。

1度目に
、例えば”KJJ”というように間違った文字を入力したときは、
「入力文字が違っています。」のメッセージが出るまではいいのですが、
再度正しい”KJX”を入力しても、
「入力文字が違っています。」のメッセージが出てきてしまいます。
(「最新の情報に更新」してすべて3項目入力しなおせば、入力できます)

ソースを
http://1811way.com/work008/test01.txt
(文字化けしていたらエンコードしてください)
でアップしておきました。
間違った文字列部分だけ入力しなおす->「確認して送信」
ボタンをクリックすると送信できるように、コード書いていただけますか。

よろしくお願いします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/02/22 22:05:29
  • 終了:2015/02/27 09:54:09

ベストアンサー

id:psne No.1

ぽけっとしすてむ回答回数476ベストアンサー獲得回数2572015/02/22 22:27:04

ポイント300pt
<script>
function check(input) {
if (input.value !== "KJX") {
    input.setCustomValidity('入力文字が違っています。');
  }else{
    input.setCustomValidity('');
  }
}
</script>

二行追加しました。
エラーメッセージをリセットすると、メッセージが表示されなくなり、データを送信できるようになります。
制約 - フォーム - HTML要素 - HTML5 タグリファレンス - HTML5.JP

id:kohhi

早速お返事いただきありがとうございました。できました。

2015/02/23 11:21:25

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません