聞きたいこと
jQuery Validation Pluginを使用して、テキストエリアに対して20文字以上入力した際にバリデーションメッセージを表示したいと思っています。
ただ、テキストエリアに最初にフォーカスした際は、不正な値を入力しても自動的にバリデーションメッセージが表示されず、
その他のコンポーネントに一度フォーカスした後に、再度テキストエリアにフォーカスすると、バリデーションメッセージが表示されます。
以下はソースコードです。
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script> </head> <body> <form id="user-form" action="#"> <label>comment: </label> <textarea id="comment" name="comment" required="" minlength="2" maxlength="20"></textarea><br> <input type="submit"> </form> <script type="text/javascript"> $(document).ready(function() { $('#user-form').validate({ rules: { comment: { required: true, minlength: 2, maxlength: 20 } } }) }) </script> <style> .error { color: red; } </style> </body> </html>
(※ 以下URLは同じ内容のJSFiddleになります)
https://jsfiddle.net/s_kikuchi/afr7csp5/32/
普通のtextだと特にこのような事象が発生しないので、なぜこのようなことになっているのかわかる方がいましたら教えてほしいです。
細かいのですが
textare→textarea
あと、コードや画像は原則質問本文にご提示ください。
ご指摘ありがとうございます。先程ご指摘していただいた部分を修正させていただきました。
お手数ですが、ご確認お願いいたします。。
確かGIFアニメも添付可能だったと思います。
ありがとうございます。先程GIFアニメーションを挿入しました。
度々すいませんでした。
特に問題が起きているようには思いません。
送信押さないとチェックしないという仕様なのでは。あくまで簡易バリデートツールですし。
あとtextareaにmaxlengthが指定されているので最大文字数のバリデーションは起こせないかと思うのですが・・・(少なくとも手元のChromeで色々やってみましたが無理でした)
回答1件
あなたの回答
tips
プレビュー