Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Обработка checkbox-ов и комментариев (https://javascript.ru/forum/misc/69223-obrabotka-checkbox-ov-i-kommentariev.html)

SkyRewir 07.06.2017 11:49

Обработка checkbox-ов и комментариев
 
Добрый день!
Уважаемые форумчане помогите пожалуйста
На сайте есть форма

<form action = "rrr.php" method = "POST">
  <div class="col-md-12">
            <div class="input-group">            
              <span class="input-group-addon">
                <span class="col-md-8"><input type="checkbox" name="fo_1">Не хватило информации об услуге</span>
                <span><input type="text" class="form-control" name="fo_1_1"></span>
              </span>            
            </div>
          </div>
          <div class="col-md-12">
            <div class="input-group">            
              <span class="input-group-addon">
                <span class="col-md-8"><input type="checkbox" name="fo_2">Не хватило информации о компании</span>
                <span><input type="text" class="form-control" name="fo_2_2"></span>
              </span>            
            </div>
          </div>
          <div class="col-md-12">
            <div class="input-group">            
              <span class="input-group-addon">
                <span class="col-md-8"><input type="checkbox" name="fo_3">Не нашел(-шла) услугу, которую искала</span>
                <span><input type="text" class="form-control" name="fo_3_3"></span>
              </span>            
            </div>
          </div>
       <div class="col-md-12">
            <div class="input-group">            
              <span class="input-group-addon">
                <span class="col-md-8"><input type="checkbox" name="fo_4">Компания не вызывает доверия</span>
              </span>            
            </div>
          </div>
<p>Введите Ваш email<input type="email" class="form-control" name="email_fo" required placeholder="Ведите ваш email"></p>
<button type="submit" class="btn btn-default">Отправить</button>
</form>


Подскажите как реализовать функцию проверки формы:
Человек должен заполнить форму, может выбрать несколько checkbox-ов и написать к ним комментарии (если нужно), если не заполнен и не выбран не один checkbox, по нажатию на кнопку,выводило бы сообщение "Выберите один из пунктов"
Если есть хотя бы один заполненный checkbox, форма была отправлена на обработку
Спасибо!

laimas 07.06.2017 12:23

Ну если проверка у адреса нативная, значит просто добавить/убрать required и других полей.

$(function() {
    $('input:checkbox').change(function() {
        $(this).closest('.input-group-addon').find('input:text').prop('required', this.checked).attr('placeholder', this.checked ? 'Заполните' : '')
    });
});


А вот на сервере проверять обязательно.

SkyRewir 07.06.2017 13:10

Цитата:

Сообщение от laimas (Сообщение 454789)
Ну если проверка у адреса нативная, значит просто добавить/убрать required и других полей.

$(function() {
    $('input:checkbox').change(function() {
        $(this).closest('.input-group-addon').find('input:text').prop('required', this.checked).attr('placeholder', this.checked ? 'Заполните' : '')
    });
});


А вот на сервере проверять обязательно.

Спасибо за ответ и скрипт
А можно сделать так, что если в форме ничего не заполнено
не выбраны чекбоксы , выводило выберите один из вариантов?

laimas 07.06.2017 13:20

Можно. Не удаляя данный обработчик, добавить обработчик отправки формы:

$('form').submit(function() {
    if(!$(this).find('input:checked').length) {
        alert('Выберите один из вариантов');
        return false
    }
})


PS. Если один из вариантов, то это не checkbox, а radio тогда.

SkyRewir 07.06.2017 14:18

Цитата:

Сообщение от laimas (Сообщение 454792)
Можно. Не удаляя данный обработчик, добавить обработчик отправки формы:

$('form').submit(function() {
    if(!$(this).find('input:checked').length) {
        alert('Выберите один из вариантов');
        return false
    }
})


PS. Если один из вариантов, то это не checkbox, а radio тогда.

Спасибо большое! Все отлично работает:thanks:

SkyRewir 09.06.2017 12:19

Подскажите, а если на сайте есть ещё одна форма и скрипт
$('form').submit(function() {
	    if(!$(this).find('input:checked').length) {
	        alert('Выберите один из вариантов');
	        return false
	    }
	})

её захватывает, но это не нужно. Как это возможно убрать?

laimas 09.06.2017 12:36

Заменить $('form') на конкретный селектор конкретной формы. Например, если форме которую нужно обрабатывать этим событием определить id="myform", то селектор будет таким: $('#myform').

SkyRewir 09.06.2017 12:44

Спасибо!

SkyRewir 09.06.2017 14:57

Цитата:

Сообщение от laimas (Сообщение 454789)
Ну если проверка у адреса нативная, значит просто добавить/убрать required и других полей.

$(function() {
    $('input:checkbox').change(function() {
        $(this).closest('.input-group-addon').find('input:text').prop('required', this.checked).attr('placeholder', this.checked ? 'Заполните' : '')
    });
});

Подскажите пожалуйста,а как здесь задать id или class формы?
Что бы этой функцией обрабатывалась одна форма на странице

laimas 09.06.2017 15:21

$('здесь_селектор_формы input:checkbox')

или, что быстрее для разбора

$('селектор_формы).find('input:checkb ox')

PS. А лучше так:

$('form_selector').submit(e) {
     //код
}).find('input:checkbox').change(function() {
    //код
});


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