Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.06.2019, 16:39
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 250

Добавить класс к радиокнопкам при валидации
Здравствуйте!
Есть некая форма с группами радиокнопок. Каждая группа кнопок обязательна для заполнения.
<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 позволяет делать валидацию радиокнопок, но почему-то не добавляет никаких классов к незаполненым группам, что бы можно было их как-то "подсветить"...
Нужен дополнительный скрипт, который бы мог это сделать.
Ответить с цитированием
  #2 (permalink)  
Старый 03.06.2019, 08:32
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 250

Добавил вот такую функцию:
// 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();
		}
	});
});

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

Последний раз редактировалось Igorsrt, 03.06.2019 в 08:39.
Ответить с цитированием
  #3 (permalink)  
Старый 03.06.2019, 15:27
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,180

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

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


Так?
Ответить с цитированием
  #4 (permalink)  
Старый 03.06.2019, 16:04
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 250

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

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


Так?
да нет... что-то не срабатывает ( ... также все fieldset во всех анкетах с err ((
Ответить с цитированием
  #5 (permalink)  
Старый 03.06.2019, 16:22
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,180

Проверил на вашей форме...
$(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;
	});
});
Ответить с цитированием
  #6 (permalink)  
Старый 03.06.2019, 16:35
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 250

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить класс дочернему элементу rafaello Элементы интерфейса 5 16.04.2018 17:58
При нажатии на тег <pre> добавить элемент в массив и вывести его vanyabb Angular.js 4 03.04.2017 15:46
Как правильно добавить класс при наведении mitrich38 Events/DOM/Window 9 19.09.2016 23:40
при нажатие на кнопку добавить блок (картинку) avi1984 (X)HTML/CSS 2 07.04.2016 13:13
textarea. При нажатии enter, добавить bb-code [br]. Как? javasc Events/DOM/Window 1 22.01.2011 08:43