別の質問で別の日。私は自分のWebアプリケーションに再び取り組んでいます。今、私は問題を抱えています。「required」属性は、主要なブラウザー ( http://www.w3schools.com/tags/att_select_required.asp ) ではサポートされていません。最初のオプション値が空の場合にのみ機能します。それは問題なく動作します。フォームが $invalid で、「選択してください」で終了した場合、submit イベントは何もしません。
Land*:<br />
<select id="countries" name="country" data-ng-model="contact.country" required required-select>
<option value="">Please select</option>
<script type="text/javascript">
$(document).ready(function () {
var countries = {};
if (countries.length > 0) {
return countries;
} else {
$.get('WebKalkTool/country_de.xml', function(data) {
countries = data;
var that = $('#countries');
$('name', countries).each(function() {
$('<option />', {
text: $(this).text(),
}).appendTo(that);
});
}, 'xml');
}
});
</script>
</select>
<span class="error" data-ng-show="mandatory">Please select an item</span>
</p>
私が探しているのは、値が空かどうかをチェックし、送信後にエラーを表示し、アイテムを選択するとエラーが消えるディレクティブです。
ディレクティブは次のようになります。
authApp.directive('requiredSelect', function () {
return {
require: 'select',
link: function (scope, formElement, attr, formSelect) {
console.log('FORM : Linker called');
console.log(formSelect);
console.log(formSelect.selected.value); // is undefined..
scope.$watch(formSelect.selectedIndex.value, function () {
console.log("index changed"); // Always log when another index is selected
if (formSelect.selectedIndex.value == "") {
console.log("value="");
// only show error after submit OR has visited on span id mandatory (or add new template?
// Tell the form, it's invalid, select is invalid
} else if (formSelect.selectedIndex.value != "") {
console.log("index > 0");
// everything is fine, select is valid
} else {
console.log("FORMSELECT.SELECTINDEX = UNDEFINED");
// just 4 testing my link
}
});
}
};
});
互換性を考えて HTML5 検証を削除しましたが、HTML5 検証はとにかく最初のヒントしか表示しません。
入力フィールドの「必須」属性のようなもので、同じように機能する必要があります。送信ボタンを無効にしたくありません。たぶん、この「選択してください」オプションを削除して空のままにすることもできます。
あるいは、私は次のようなことをするほど賢くないだけかもしれません。
<span class="error" data-ng-show="requestForm.place.hasVisited && requestForm.place.$invalid">Required!</span>
値をチェックするか、selectedIndex をチェックするかは問題ではありません。
あなたの助けに感謝し、
炭疽菌に敬意を表します