Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Добавить класс к радиокнопкам при валидации (https://javascript.ru/forum/dom-window/77646-dobavit-klass-k-radioknopkam-pri-validacii.html)

Igorsrt 01.06.2019 16:39

Добавить класс к радиокнопкам при валидации
 
Здравствуйте!
Есть некая форма с группами радиокнопок. Каждая группа кнопок обязательна для заполнения.
<form action="" method="post" id="anketa4" class="ajax_form">
	<div class="row">
		<div class="form-group col-lg-4 col-md-6">
			<div class="anketablock">
				<span class="bl-num">1</span>
				<fieldset>
					<legend>Вопрос-1</legend>
					<label for="q4-1-0" class="radio control"><input id="q4-1-0" type="hidden" name="question1[]" value=""  class="form-control" /></li>
					<label for="q4-1-1" class="radio control"><input type="radio" id="q4-1-1" name="question1[]" value="Ответ1" class="form-control required"><span>Ответ1</span></label>
					<label for="q4-1-2" class="radio control"><input type="radio" id="q4-1-2" name="question1[]" value="Ответ2" class="form-control required"><span>Ответ2</span></label>
					<label for="q4-1-3" class="radio control"><input type="radio" id="q4-1-3" name="question1[]" value="Ответ3" class="form-control required"><span>Ответ3</span></label>
				</fieldset>
			</div>
		</div>
		<div class="form-group col-lg-4 col-md-6">
			<div class="anketablock">    
				<span class="bl-num">2</span>
				<fieldset>
					<legend>Вопрос-2</legend>
					<label for="q4-2-0" class="radio control"><input id="q4-2-0" type="hidden" name="question2[]" value=""  class="form-control" /></li>
					<label for="q4-2-1" class="radio control"><input type="radio" id="q4-2-1" name="question2[]" value="Ответ1" class="form-control required"><span>Ответ1</span></label>
					<label for="q4-2-2" class="radio control"><input type="radio" id="q4-2-2" name="question2[]" value="Ответ2" class="form-control required"><span>Ответ2</span></label>
					<label for="q4-2-3" class="radio control"><input type="radio" id="q4-2-3" name="question2[]" value="Ответ3" class="form-control required"><span>Ответ3</span></label>
				</fieldset>
			</div>
		</div>
		<div class="form-group col-lg-4 col-md-6">
			<div class="anketablock">
				<span class="bl-num">3</span>
				<fieldset>
					<legend>Вопрос-3</legend>
					<label for="q4-3-0" class="radio control"><input id="q4-3-0" type="hidden" name="question3[]" value=""  class="form-control" /></li>
					<label for="q4-3-1" class="radio control"><input type="radio" id="q4-3-1" name="question3[]" value="Ответ1" class="form-control required"><span>Ответ1</span></label>
					<label for="q4-3-2" class="radio control"><input type="radio" id="q4-3-2" name="question3[]" value="Ответ2" class="form-control required"><span>Ответ2</span></label>
					<label for="q4-3-3" class="radio control"><input type="radio" id="q4-3-3" name="question3[]" value="Ответ3" class="form-control required"><span>Ответ3</span></label>
				</fieldset>
			</div>
		</div>	
	</div>
	<div class="form-group">
		<div class="controls">
			<button type="submit" class="submit-btn ankbtn" value="Submit">Отправить анкету</button>
		</div>
	</div>
</form>

Сайт сделан на MODX + Formit. Formit позволяет делать валидацию радиокнопок, но почему-то не добавляет никаких классов к незаполненым группам, что бы можно было их как-то "подсветить"...
Нужен дополнительный скрипт, который бы мог это сделать.

Igorsrt 03.06.2019 08:32

Добавил вот такую функцию:
// validation
$('.ajax_form').ready(function(){
	var item = $(this);
	function checkRadio()
	{
		$("fieldset").each(function(){
			$(this).toggleClass("err", !$("input",this).is(":checked"))
		});
	}
	$(".submit-btn").click(function(){
		checkRadio();
		if(item.find('.err:visible').length){
			return false;
			} else {
				item.submit();
		}
	});
});

..вроде как, работает. Но дело в том, что у меня несколько форм с радиокнопками на одной странице. И когда я в одной из них нажимаю кнопку "Отправить", проверка происходит во всех формах, а нужно только в той, в которой была нажата кнопка... Как бы это поправить?

Malleys 03.06.2019 15:27

В 6-ой строке из примера поста №2 замените...
$("fieldset").each(function(){

на...
$("fieldset", item).each(function(){


Так?

Igorsrt 03.06.2019 16:04

Цитата:

Сообщение от Malleys (Сообщение 508694)
В 6-ой строке из примера поста №2 замените...
$("fieldset").each(function(){

на...
$("fieldset", item).each(function(){


Так?

да нет... что-то не срабатывает ( ... также все fieldset во всех анкетах с err ((

Malleys 03.06.2019 16:22

Проверил на вашей форме...
$(function() {
	$(".submit-btn").click(function() {
		$("fieldset", this.form).each(function() {
			$(this).toggleClass("err", !$("input", this).is(":checked"));
		});

		return $(this.form).find('.err:visible').length === 0;
	});
});

Igorsrt 03.06.2019 16:35

Да, вот так работает как нужно. Спасибо огромное!


Часовой пояс GMT +3, время: 06:05.