jQueryは、TextareasのBreaksフォーム検証を自動化します
-
30-09-2019 - |
質問
これがjQueryのスニペットです:
$(document).ready(function() {
$('textarea').autoResize();
$('#submitSurvey').click(function() {
- いくつかの行をスキップ -
$("input[id$='Buggy']:radio:checked").each(function() {// If any radio buttons are marked "Buggy" and no comment is left, require comment
var parent = $(this).parent().get(0);// parent element of the radio button
var nextCommentDiv = $(parent).nextAll('.comments').get(0);
var txtarea = $(nextCommentDiv).children('.itemComment').get(0);// comment for the radio button marked "Buggy"
var surroundingDiv = $(parent).parent().get(0);
var heading = $(surroundingDiv).prev();// section title
if(txtarea.value == '' || txtarea.value == 'Type comments here') {
$(txtarea).addClass('invalid');
$(heading).addClass('redtext');
valid = false;
}
});
});
});
これがHTMLコードのスニペットです:
<div class="subQ">Question 1</div>
<div class="ratings">
<input type="radio" name="item1" id="item1Works" value="Works" /><label for="item1Works"> Works </label>
<input type="radio" name="item1" id="item1Buggy" value="Buggy" /><label for="item1Buggy"> Buggy </label>
<input type="radio" name="item1" id="item1na" value="Not Tested" /><label for="item1na"> Didn't Test</label>
</div><br />
<div class="subQ">Question 2</div>
<div class="ratings">
<input type="radio" name="item2" id="item2Works" value="Works" /><label for="item2Works"> Works </label>
<input type="radio" name="item2" id="item2Buggy" value="Buggy" /><label for="item2Buggy"> Buggy </label>
<input type="radio" name="item2" id="item2na" value="Not Tested" /><label for="item2na"> Didn't Test</label>
</div><br />
<div class="subQ">Question 3</div>
<div class="ratings">
<input type="radio" name="item3" id="item3Works" value="Works" /><label for="item3Works"> Works </label>
<input type="radio" name="item3" id="item3Buggy" value="Buggy" /><label for="item3Buggy"> Buggy </label>
<input type="radio" name="item3" id="item3na" value="Not Tested" /><label for="item3na"> Didn't Test</label>
</div><br />
<div class="comments">
<textarea class="itemComment" name="itemsComment" id="itemsComment" rows="1">Type comments here</textarea>
</div>
グループには、コメントフィールドが1つだけの質問がいくつかあることに注意してください。検証は、「バギー」とマークされたラジオボタンのグループにグループをチェックし、それが見つかった場合、コメントフィールドの周りに赤い境界線を置いて、ユーザーにバギーエリアについてコメントするように要求します(フォームはデスクトップアプリケーションのベータテスター用です)。
何らかの理由で、すべてのTextareasに自動化を追加すると、検証の$(txtarea).AddClass( 'Invalid')ラインはもう機能しません(ただし、次の行$(見出し).AddClass( 'RedText) ')機能します)。 FirefoxやFirebugでエラーが発生していません。私のコードは少し不器用であると確信しています。私はjQueryに慣れていないので、DOMトラバーサルセレクターの多くは「何が機能したか」です。
これが次のリンクです jQueryプラグインを自動化します.
助言がありますか?
私はJavaScriptとjQueryの初心者ですので、私のアマチュアコードについてあまりにも難しい時間を与えないでください:)
解決
多くの入力がなかったので、私は別の解決策を探し続けました、そして、私は受け入れられるものを見つけたと思います。 Smartareaプラグイン 本質的に同じことをする小さくてシンプルなプラグインですが、明らかに見た目は見られません(テキストはアニメーション化されず、CSSオーバーフロープロパティを明示的に設定しない限り、入力するときにバーが点滅します。隠れた')。しかし、私のニーズのために、それはトリックを行い、フォームの検証はまだ機能します。
コードを追加してアニメーション化してオーバーフロープロパティを処理できると確信していますが、「壊れていない場合...」
繰り返しになりますが、これに関するコメントは、私が常にもっと学びたいと思っているので、歓迎されます(特に私は実際に問題を解決しなかったので、むしろ回避策を見つけたので)。