Посмотрите на этот пример:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$http) {
var getJoke = function(){
return $http.get('http://api.icndb.com/jokes/random').then(function(res){
return res.data.value;
});
}
getJoke().then(function(res) {
console.log(res.joke);
});
});
Как вы можете видеть, getJoke
возвращает разрешенное обещание (оно разрешено при возврате res.data.value
). Таким образом, вы ждете, пока запрос $ http.get не будет завершен, а затем выполнится console.log (res.joke) (как обычный асинхронный поток).
Это plnkr:
Плагин проверки достоверности проверяет только текущий / сфокусированный элемент. Поэтому вам нужно будет добавить специальное правило к валидатору для проверки всех флажков. Как и в предыдущем ответе.
$.validator.addMethod("roles", function(value, elem, param) {
return $(".roles:checkbox:checked").length > 0;
},"You must select at least one!");
И на элементе:
<input class='{roles: true}' name='roles' type='checkbox' value='1' />
Кроме того, вы, скорее всего, найдете отображение сообщения об ошибке, которого недостаточно. Отображается только 1 флажок и отображается только 1 сообщение. Если вы нажмете еще один отдельный флажок, который затем вернет действительный для второго флажок, исходный будет по-прежнему отмечен как недопустимый, и сообщение об ошибке все еще отображается, несмотря на то, что форма действительна. Я всегда прибегал к простому отображению и скрытию ошибок в этом случае. Затем валидатор заботится только о том, чтобы не отправить форму.
Другой вариант, который у вас есть, - это написать функцию, которая будет изменять значение скрытого ввода как «действительное» при щелчке по флажке, а затем прикрепить правило проверки к скрытому элементу. Это будет проверяться только в событии onSubmit, но будет отображать и скрывать сообщения в соответствующие моменты времени. Это о единственных вариантах, которые вы можете использовать с плагином validate.
Надеюсь, что это поможет!
Mmm сначала ваши идентификационные атрибуты должны быть уникальными, ваш код, вероятно, будет
<form>
<input class='roles' name='roles' type='checkbox' value='1' />
<input class='roles' name='roles' type='checkbox' value='2' />
<input class='roles' name='roles' type='checkbox' value='3' />
<input class='roles' name='roles' type='checkbox' value='4' />
<input class='roles' name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
</form>
. Для вашей проблемы:
if($('.roles:checkbox:checked').length == 0)
// no checkbox checked, do something...
else
// at least one checkbox checked...
НО, помните, что проверка формы JavaScript является только показательным, все проверки ДОЛЖНЫ выполняться на стороне сервера.
$("#idform").validate({
rules: {
'roles': {
required: true,
},
},
messages: {
'roles': {
required: "One Option please",
},
}
});
sir_neanderthal уже опубликовал хороший ответ.
Я просто хочу указать, что если вы хотите использовать разные имена для своих входов, вы также можете использовать (или просто скопируйте метод) require_from_group method из официального jQuery Validation extra-methods.js ( ссылка на CDN для версии 1.13.1 ).
Очень вероятно, что вы хотите иметь текст рядом с этим флажком. В этом случае вы можете поместить флажок внутри ярлыка, как я делаю ниже:
<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="72" aria-required="true" class="error"> All Over</label>
<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="73" aria-required="true" class="error"> All Over X2</label>
Проблема в том, что, когда отображается сообщение об ошибке, оно будет вставлено после флажка, но перед текстом , что делает его нечитаемым. Чтобы исправить это, я изменил функцию размещения ошибок:
if (element.is(":checkbox")) {
error.insertAfter(element.parent().parent());
}
else {
error.insertAfter(element);
}
Это зависит от вашего макета, но я сделал это для размещения специальных ошибок для элементов управления флажками. Я получаю родительский флажок, который является меткой, а затем я получаю родительский элемент, который является div в моем случае. Таким образом, ошибка помещается под списком элементов управления флажками.
убедитесь, что input-name[]
находится в кавычках в наборе правил. Потребовалось несколько часов, чтобы понять эту часть.
$('#testform').validate({
rules : {
"name[]": { required: true, minlength: 1 }
}
});
читайте больше здесь ... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29
Пример из https://github.com/ffmike/jquery-validate
<label for="spam_email">
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" /> Spam via E-Mail </label>
<label for="spam_phone">
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /> Spam via Phone </label>
<label for="spam_mail">
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" /> Spam via Mail </label>
<label for="spam[]" class="error">Please select at least two types of spam.</label>
То же самое без поля «проверять» в тегах только с помощью javascript:
$("#testform").validate({
rules: {
"spam[]": {
required: true,
minlength: 1
}
},
messages: {
"spam[]": "Please select at least two types of spam."
}
});
И если вам нужны разные имена для входов, вы можете использовать somethig следующим образом:
<input type="hidden" name="spam" id="spam"/>
<label for="spam_phone">
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam_phone" /> Spam via Phone</label>
<label for="spam_mail">
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam_mail" /> Spam via Mail </label>
Javascript:
$("#testform").validate({
rules: {
spam: {
required: function (element) {
var boxes = $('.checkbox');
if (boxes.filter(':checked').length == 0) {
return true;
}
return false;
},
minlength: 1
}
},
messages: {
spam: "Please select at least two types of spam."
}
});
Я добавил скрытый вход перед входами и установка его «требуется», если нет выбранных флажков