0

Здравствуйте. Есть форма, состоящая из ряда одинаковых блоков

<div class="progblock">
<div class="strelka"><a href=""><img src="/template/img/ico/strelka.png" class="img-responsive"></a></div>
<label class="bold_name"><input type="checkbox" name="public" 
class="public osnova" value="Программа 1"> Программа 1</label>

<div class="napravlenie hides" style="display:none;">
         <div class="checkbox col-xs-6 forma_obuchen">
             <select name="ot_forma1" class="form-control">
              <option value="">Форма обучения</option>
                <option value="Очно-заочная">Очно-заочная</option>
                <option value="Дистанционная">Дистанционная</option>
             </select>
         </div>
         <div class="checkbox col-xs-6 kolvo_uchenik">
         <input type="number" name="ot_kolvo1" value="" 
class="form-control" placeholder="Число слушателей">
         </div>
         </div>
<div class="clearfix"></div>
</div>

Есть скрипт, отвечающий за сбор данных с формы и передачу их на следующий шаг, а также за валидацию формы. У нас при выборе каких-либо чекбоксов происходит разворачивание скрытого блока под чекбоксом и там уже пользователь выбирает форму обучения и количество слушателей. Вот без выбранных этих двух полей дальнейший шаг - открытие модального окна выполняться не должен.

$(document).ready(function() {
  $('a.podtv').click(function(e) {
  e.preventDefault();

  var arr = [].map.call($('input:checkbox:checked'), function(el) {
    var parent = $(el).parents('.progblock');
    return {
      'name': el.value,
      'type': $('select', parent).val(),
      'val': $('[type="number"]', parent).val()
    }
  });
var mass = JSON.stringify(arr, null, 4);
// Блок валидации
var es = $('input:checkbox:checked')
var parents = $(es).parents('.progblock');
var selprogblock = $('select', parents).val();
var numprogblock = $('[type="number"]', parents).val();
// Проверяем выбрана ли форма обучения
if (selprogblock == '') {
  alert('Выберите форму обучения!');
}
// Проверяем выбрано ли количество слушателей
else if (numprogblock == '') {
  alert('Введите количество слушателей!');
} else {
  for (var i = 0; i < arr.length; i++) {
    $(".info_users_prog").append('<p>' + arr[i].name + '</p><ul><li>' + arr[i].type + '</li><li>' + arr[i].val + '</li></ul>');
    $(".parameter").append('<input type="hidden" name="names[]" value="' + arr[i].name + '">');
    $(".parameter").append('<input type="hidden" name="types[]" value="' + arr[i].type + '">');
    $(".parameter").append('<input type="hidden" name="vals[]" value="' + arr[i].val + '">');
    $("#myModal").show("slow");
  }
}
});
  $('button.close').click(function(e) {
    $("#myModal").hide("slow");
    arr = [];
    $('.info_users_prog').empty();
  });
  $('button.closer').click(function(e) {
    $("#myModal").hide("slow");
    arr = [];
    $('.info_users_prog').empty();
    $('.parameter').empty();
  });
});

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

UPD: Пытаюсь сделать проверку таким образом, но в данном варианте вылезает сообщение alert, но скрипт продолжает исполняться далее. и в результате открывается модальное окно, в котором есть только те данные, поля которых заполнены правильно. Получается просто не добавляет те данные где сработала ошибка валидации. А как просто остановить дальнейшее исполнение скрипта, чтобы даже модалка не открывалась?

var arr= [].map.call($('input:checkbox:checked'),function(el) {
        var parent = $(el).parents('.progblock');
        if ($('select',parent).val() == '') {
    alert('Выберите форму обучения!');
    return;
        }
        else if ($('[type="number"]',parent).val() == '') {
    alert('Введите количество слушателей!');
    return;
        }
        else {
        return {
            'name' : el.value, 
            'type' : $('select',parent).val(), 
            'val' : $('[type="number"]',parent).val()
            }
        }
        });

1 ответ 1

0

jQuery validation plugin

Вы можете использовать специальный плагин для проверки форм:

https://jqueryvalidation.org/

У него есть специальная функция validate, которая выполняет проверку формы без отправки ее на сервер: https://jqueryvalidation.org/validate/

Он поддерживает проверку Select, Radio:

https://jqueryvalidation.org/files/demo/radio-checkbox-select-demo.html

Нужно только подключить библиотеку и добавить необходимые атрибуты в теги select, которые обязательны для заполнения.

4
  • У меня все это дело не в тегах <form>/ То есть фактически не форма а просто набор div'ов. Плагин будет работать?
    – Batyabest
    24 ноя 2016 в 15:20
  • Нет. Добавьте тег
    – Crantisz
    25 ноя 2016 в 7:22
  • А если у меня не форма а набор div'ов то как быть? Я могу добавить теги form но я так понимаю валидация через плагин работает по нажатию кнопки submit а у меня там просто ссылка.
    – Batyabest
    25 ноя 2016 в 8:28
  • @Batyabest Вы можете вызвать проверку формы с помощью javascript: var validator = $( "#myform" ).validate(); validator.form(); jqueryvalidation.org/Validator.form
    – Crantisz
    26 ноя 2016 в 20:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.