[英]How to jquery validation under select2 field - I tried everything
我有 select2 和 Jquery 和復選框的問題。 我制作了一個包含一些不同領域的表格。 當我添加復選框的驗證時,驗證警告顯示在選擇字段上方。 當我沒有添加此代碼時:
[復選框驗證代碼][1]
[![在此處輸入圖像描述][1]][1]
警告顯示在 select2 字段下,但復選框警告顯示錯誤:[復選框錯誤警告][3] 我不知道為什么,有人可以查看代碼並糾正我嗎?
[![在此處輸入圖像描述][2]][2]
[表單打印屏幕][2]
[![在此處輸入圖像描述][3]][3]
你可以試試這個:
<form id="myForm" method="post" name="myForm" action="">
<div class="checkbox-container">
<label for="terms">terms : </label>
<input type="checkbox" name="terms" id="terms">
<div id="errorToShow"></div>
</div>
<button type="submit">save</button>
</form>
腳本:
$("#myForm").validate({
rules: {
terms: "required"
},
messages: {
terms: "select the checkbox"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "terms") {
error.appendTo("#errorToShow");
} else {
error.insertAfter(element);
}
}
});
將 contains id="errorToShow" 放在要顯示錯誤的位置。 這對我有用。 錯誤信息將顯示在
<div id="errorToShow"></div>
謝謝您的回答。 所以我做的有點不同。 驗證代碼現在是:
$("#signupForm").validate({
debug: false,
errorClass: "has-error",
errorElement: "span",
rules: {
miejscowosc: {
required: true,
lettersonly: true,
},
wojewodztwo: {
required: true,
},
errorContainer: $('#errorContainer'),
// enabling this will display error labels in the container error
// errorLabelContainer: $('#errorContainer ul'),
// wrapper: 'li',
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass); //.removeClass(errorClass);
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass); //.addClass(validClass);
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else if (element.hasClass('select2')) {
error.insertAfter(element.next('span'));
}
else if (element.attr("name") == "zgoda") {
error.insertAfter("#checkboxError");
}
else if (element.attr("name") == "zgoda1") {
error.insertAfter("#checkboxError1");
}
else if (element.attr("name") == "zgoda2") {
error.insertAfter("#checkboxError2");
}
else {
error.insertAfter(element);
}
},
});
現在警告消息在 select2 下,所以沒問題。
select2的代碼是
var Formularz = function () {
return {
//main function to initiate the module
init: function () {
function format(state) {
if (!state.id) return state.text; // optgroup
return state.id.toLowerCase() + state.text;
}
$("#Select_Wojewodztwo").select2({
placeholder: "Wybierz Wojewodztwo",
allowClear: true,
formatResult: format,
width: '100%',
formatSelection: format,
escapeMarkup: function (m) {
return m;
}
});
}
};
}();
jQuery(document).ready(function() {
Formularz.init();
});
第二個我的問題是 has-error 在 select2 字段中沒有 wotk 並且沒有用紅色突出顯示它。
表格中的代碼是:
<div class="col-sm-12 col-md-4 col-lg-4 form-group">
<div class="col-lg-12 form-label">
Województwo
</div>
<div class="col-lg-12 ">
<select name="wojewodztwo" id="Select_Wojewodztwo" class="select2 form-control selection">
<option value=""></option>
<option value="Dolnoslaskie">Dolnośląskie</option>
<option value="Kujawsko-pomorskie">Kujawsko-pomorskie</option>
<option value="Lubelskie">Lubelskie</option>
<option value="Lubuskie">Lubuskie</option>
<option value="Lodzkie">Łódzkie</option>
<option value="Malopolskie">Małopolskie</option>
<option value="Mazowieckie">Mazowieckie</option>
<option value="Opolskie">Opolskie</option>
<option value="Podkarpackie">Podkarpackie</option>
<option value="Podlaskie">Podlaskie</option>
<option value="Pomorskie">Pomorskie</option>
<option value="Slaskie">Śląskie</option>
<option value="Swietokrzyskie">Świętokrzyskie</option>
<option value="Warminsko-mazurskie">Warmińsko-mazurskie</option>
<option value="Wielkopolskie">Wielkopolskie</option>
<option value="Zachodniopomorskie">Zachodniopomorskie</option>
</select>
</div>
</div>
你怎么看待這件事。 這里有什么問題?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.