2

Сверстал форму:

<form name="mainForm" method="get" id="mainForm">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      <div class="block-1">
        <!--First name-->
        <div class="form-group">
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" value="">
          <label for="firstName" id="firstNameLabel" style="color: transparent">"Field must be filled out"</label>
        </div>
        <!--Last name-->
        <div class="form-group">
          <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name">
          <label for="LastName" id="lastNameLabel" style="color: transparent">"Field must be filled out"</label>
        </div>
        <!--Title-->
        <div class="form-group">
          <span class="input-group-btn">
            <select id="titles" class="selectpicker form-control"
                data-live-search="true" name="titleName" title="Please select a lunch ...">
              <option selected></option>
              <option>Mr.</option>
              <option>Ms.</option>
            </select>
          </span>
          <label for="titles" id="titlesLabel" style="color: transparent">"Field must be filled out"</label>
        </div>
      </div>
    </div>
  </div>
</form>
<!--Button-->
<div class="row">
  <div class="col-md-3 col-offset-9">
    <input type="button" onclick="return jqvalidation()" name="data" id="submitButton" class="btn btn-large btn-danger form-control" value="Send">
    </input>
  </div>
</div>

И написал функцию для валидации полей формы с использованием jQuery, но она ещё не закончена:

function jqvalidation() {
    var elems = $('.block-1');
    var f = 0;
    jQuery.each(elems, function (key, val) {
        if ($(val).val() == "" || $(val).val() == null) {
            $(val).css('border', '1px solid red');
            $(val).attr("placeholder", "Field must be filled out").addClass('error');
            f = 1;
        }
        else {
            $(val).css('border', '#ccc');
        }
    });
    if (f == 1) {
        return false;
    }
}

Как правильно обращаться к элементам <input> и <label>, вложенным в элементы с классом block-1?

1 ответ 1

2

Получение всех <input> и <label> внутри элементов с классом block-1:

var $elements = $('.block-1').find('input,label');

Получение всех <input> и <label> отдельно для каждого элемента с классом block-1:

$('.block-1').each(function() {
    var $elements = $(this).find('input,label'); //this указывает на текущий элемент с классом block-1
});

Получение всех <input> и <select> внутри элементов с классом block-1 и обработка каждого из них по отдельности:

$('.block-1').find('input,select').each(function() {
    var $this = $(this); //this указывает на текущий input или select
    if ($this.val() == "") {
        ...
    }
    ...
});

Что касается модификации вашего кода:

  1. Элемент с классом block-1 всего один, поэтому нет смысла делать по нему .each(). Имеет смысл делать .each() по всем <input>-ам внутри него.
  2. Использование <label>-ов в вашем коде я не увидел, поэтому в переделанной версии они не фигурируют.
  3. .val(), .css(), .attr() и .addClass() нужно применять к самому <input>-у, а не к блоку, его содержащему.
  4. Переменная с ничего не значащим именем f переименована в hasError, также хранимые в ней данные с Number (0 и 1) заменены на Boolean (false и true). Нет смысла хранить "да/нет" в виде числа. Так как return не несёт никакой пользы в данном коде, то весь код, связанный с hasError и return, закомментирован.
  5. Использование inline JS (onclick="") считает плохим тоном. Вызов функции заменён на $('#submitButton').on("click", function() {.

Итоговая версия:

$(document).ready(function() {
  $('#submitButton').on("click", function() {
    //var hasError = false;
    $('.block-1 input').each(function() {
      var $this = $(this);
      if ($this.val() == "") {
        $this.css('border', '1px solid red');
        $this.attr("placeholder", "Field must be filled out");
        $this.addClass('error');
        //hasError = true;
      } else {
        $this.css('border', '#ccc');
      }
    });
    //return hasError;
  });
});
<form name="mainForm" method="get" id="mainForm">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      <div class="block-1">
        <!--First name-->
        <div class="form-group">
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" value="">
          <label for="firstName" id="firstNameLabel" style="color: transparent">"Field must be filled out"</label>
        </div>
        <!--Last name-->
        <div class="form-group">
          <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name">
          <label for="LastName" id="lastNameLabel" style="color: transparent">"Field must be filled out"</label>
        </div>
        <!--Title-->
        <div class="form-group">
          <span class="input-group-btn">
            <select id="titles" class="selectpicker form-control"
                data-live-search="true" name="titleName" title="Please select a lunch ...">
              <option selected></option>
              <option>Mr.</option>
              <option>Ms.</option>
            </select>
          </span>
          <label for="titles" id="titlesLabel" style="color: transparent">"Field must be filled out"</label>
        </div>
      </div>
    </div>
  </div>
</form>
<!--Button-->
<div class="row">
  <div class="col-md-3 col-offset-9">
    <input type="button" name="data" id="submitButton" class="btn btn-large btn-danger form-control" value="Send">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Какие проблемы я вижу в этой версии:

  1. По клику на #submitButton не происходит отправка формы. Имеет смысл переделать на один из этих вариантов:

    • внести эту кнопку в форму, сменив её type на submit, и добавить обработчик (со всеми этими проверками) события submit на саму форму.
    • делать в обработчике отправку формы в случае успешного прохождения валидации:

      if (!hasError) {
          $('#mainForm').submit();
      }
      
    • отправлять в обработчике форму с помощью Ajax (опять-таки в случае успешного прохождения валидации).

  2. Отсутствует проверка значения в <select "id="titles">.
  3. Сообщение о незаполненном (и неправильно заполненном) поле не стоит делать в виде placeholder-a. В случае незаполненной поля оно просто заменяет подсказку о том, что должно быть в этом поле, а в случае неправильно заполненного поля его будет попросту не видно. Можно либо использовать для этого уже созданные (видимо, с этой же целью) <label>-ы, либо создать какие-то отдельные элементы для этого.

Версия, исправляющая эти проблемы:

$(document).ready(function() {
  $('#submitButton').on("click", function() {
    var hasError = false;
    $('.form-group').each(function() {
      var $this = $(this);
      var $input = $this.find('input,select');
      var $error = $this.find('.errorMessage');
      if ($input.val() == "") {
        $input.addClass("errorField");
        $error.show();
        hasError = true;
      } else {
        $input.removeClass("errorField");
        $error.hide();
      }
    });
    if (!hasError) {
    	$('#mainForm').submit();
    }
  });
});
.errorField {
  border: 1px solid red;
}

.errorMessage {
  color: red;
  display: none;
}
<form name="mainForm" method="get" id="mainForm" action="">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      <div class="block-1">
        <!--First name-->
        <div class="form-group">
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" value="">
          <label for="firstName" id="firstNameLabel" class="errorMessage">"Field must be filled out"</label>
        </div>
        <!--Last name-->
        <div class="form-group">
          <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name">
          <label for="LastName" id="lastNameLabel" class="errorMessage">"Field must be filled out"</label>
        </div>
        <!--Title-->
        <div class="form-group">
          <span class="input-group-btn">
            <select id="titles" class="selectpicker form-control"
                data-live-search="true" name="titleName" title="Please select a lunch ...">
              <option selected></option>
              <option>Mr.</option>
              <option>Ms.</option>
            </select>
          </span>
          <label for="titles" id="titlesLabel" class="errorMessage">"Field must be filled out"</label>
        </div>
      </div>
    </div>
  </div>
</form>
<!--Button-->
<div class="row">
  <div class="col-md-3 col-offset-9">
    <input type="button" name="data" id="submitButton" class="btn btn-large btn-danger form-control" value="Send">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

В этой версии предполагается, что все поля для валидации находятся в блоках .form-group, и каждый блок .form-group содержит ровно один <input> или <select>.

9
  • 1
    здесь ошибка: $('.block-1 input,label'); внутри .block-1 будут искаться только input, label же будет выбираться по всей странице
    – Grundy
    2 дек 2015 в 17:51
  • @Grundy каюсь, согрешил.
    – Regent
    2 дек 2015 в 17:55
  • как вариант можно было $('.block-1 input, .block-1 label')
    – Grundy
    2 дек 2015 в 17:55
  • и с select что-от не работает
    – Grundy
    2 дек 2015 в 17:57
  • @Grundy а его в исходном коде и в заданном вопросе попросту нет. В проблемах итоговой версии я это упомянул. Думаю, стоит сделать ещё одну версию, исправляющую эти ошибки.
    – Regent
    2 дек 2015 в 18:07

Ваш ответ

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

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