1

Пишу валидацию для форм, их может быть неограниченное количество на странице. Подсвечивание красным при необходимых событиях и блокировку снопки сделал.

Теперь необходимо убирать класс btn-submit--disabled с кнопки при заполненных полях, это у меня и не получается сделать.

Ссылка на рабочий пример.

$(document).ready(function() {

  validateInput();

  blockSubmit();

});

function validateInput() {

  //vars
  var $input = $('.js-input');

  //validate-input
  $input.on('change focusout', function() {

    var type = $(this).attr('data-validate'),
      $this = $(this);

    if (type == 'require') {
      if ($this.val().length < 1) {
        $this.attr('data-success', 0);
        $this.parent().addClass('form__label--error');
        //$this.parents('.form').find('input[type=submit]').addClass('btn-submit--disabled');
      } else {
        $this.attr('data-success', 1);
        $this.parent().removeClass('form__label--error');
        //$this.parents('.form').find('input[type=submit]').removeClass('btn-submit--disabled');
      }

    }

  });

}

function blockSubmit() {

  var $form = $('.form'),
    $label = $('.form__label'),
    //$labelError = $('form__label--error'),
    $this = $(this),
    $submit = $('input[type=submit]');


  var $inputs = $form.find('.js-input');

  $form.change(function() {

    $inputs.each(function() {
      if (this.value == '') {
        $this.parents('.form').find('input[type=submit]').addClass('btn-submit--disabled');
      } else {
        $this.parents('.form').find('input[type=submit]').removeClass('btn-submit--disabled');
      }
    });

  });


}
.form__item-mod-inline-block {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.btn-submit--disabled {
  opacity: .5;
  pointer-events: none;
}
.form__input {
  border: 2px solid #c4d9ea;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  width: 100%;
  height: 45px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 25px 5px 18px;
  font: 400 14px/18px'Lato Regular';
  color: #1c1c1c;
  letter-spacing: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  background: 0 0;
}
.form__label--error {
  border-color: #e7bec3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form form-mod-no-padding">
  <div class="form__item form__item-mod-inline-block form__item-330 form__item-mod-margin-bottom-25">
    <label for="" class="form__label form__label-mod-inline-block">
      <span class="form__desc">Текст *</span>
      <input type="text" placeholder="текст" class="form__input js-input" data-validate="require" data-success="0">
    </label>
  </div>
  <div class="form__item form__item-mod-inline-block form__item-170 form__item-mod-margin-bottom-25">
    <label for="" class="form__label">
      <span class="form__desc">Время *</span>
      <input type="number" value="" class="form__input js-input" data-validate="require" data-success="0">
    </label>
  </div>
  <input type="submit" value="Сохранить" class="btn btn-140 btn-mod-inline-block btn-submit--disabled">
</form>
<form class="form form-mod-no-padding">
  <div class="form__item form__item-mod-inline-block form__item-330 form__item-mod-margin-bottom-25">
    <label for="" class="form__label form__label-mod-inline-block">
      <span class="form__desc">Текст *</span>
      <input type="text" placeholder="текст" class="form__input js-input" data-validate="require" data-success="0">
    </label>
  </div>
  <div class="form__item form__item-mod-inline-block form__item-170 form__item-mod-margin-bottom-25">
    <label for="" class="form__label">
      <span class="form__desc">Время *</span>
      <input type="number" value="" class="form__input js-input" data-validate="require" data-success="0">
    </label>
  </div>
  <input type="submit" value="Сохранить" class="btn btn-140 btn-mod-inline-block btn-submit--disabled">
</form>

7
  • $.removeClass пробуй 16 июн 2016 в 9:39
  • @SergeEsmanovich я так и делаю собственно. Я поправлю вопрос, добавлю больше кода.
    – Jarvis
    16 июн 2016 в 9:41
  • Было бы неплохо если бы вы сюда его весь перенесли
    – Vlad Vlad
    16 июн 2016 в 9:44
  • @VladVlad пару минут
    – Jarvis
    16 июн 2016 в 9:48
  • @VladVlad добавил
    – Jarvis
    16 июн 2016 в 10:03

1 ответ 1

1

вы выборку кнопки делали неправильно. вот правильный вариант

$(document).ready(function() {

  validateInput();

  blockSubmit();

});

function validateInput() {

  //vars
  var $input = $('.js-input');

  //validate-input
  $input.on('change focusout', function() {

    var type = $(this).attr('data-validate'),
      $this = $(this);

    if (type == 'require') {
      if ($this.val().length < 1) {
        $this.attr('data-success', 0);
        $this.parent().addClass('form__label--error');
        //$this.parents('.form').find('input[type=submit]').addClass('btn-submit--disabled');
      } else {
        $this.attr('data-success', 1);
        $this.parent().removeClass('form__label--error');
        //$this.parents('.form').find('input[type=submit]').removeClass('btn-submit--disabled');
      }

    }

  });

}

function blockSubmit() {

  var $form = $('.form'),
    $label = $('.form__label'),
    //$labelError = $('form__label--error'),
    $this = $(this),
    $submit = $('input[type=submit]');


  var $inputs = $form.find('.js-input');
$form.change(function(){
    $inputs.each(function(){
        if(this.value == ''){
            $(this).parents('.form').find('input[type=submit]').addClass('btn-submit--disabled');
        }
        else{
            $(this).parents('.form').find('input[type=submit]').removeClass('btn-submit--disabled');
        }
    });        
});


}
.form__item-mod-inline-block {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.btn-submit--disabled {
  opacity: .5;
  pointer-events: none;
}
.form__input {
  border: 2px solid #c4d9ea;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  width: 100%;
  height: 45px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 25px 5px 18px;
  font: 400 14px/18px'Lato Regular';
  color: #1c1c1c;
  letter-spacing: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  background: 0 0;
}
.form__label--error {
  border-color: #e7bec3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form form-mod-no-padding">
  <div class="form__item form__item-mod-inline-block form__item-330 form__item-mod-margin-bottom-25">
    <label for="" class="form__label form__label-mod-inline-block">
      <span class="form__desc">Текст *</span>
      <input type="text" placeholder="текст" class="form__input js-input" data-validate="require" data-success="0">
    </label>
  </div>
  <div class="form__item form__item-mod-inline-block form__item-170 form__item-mod-margin-bottom-25">
    <label for="" class="form__label">
      <span class="form__desc">Время *</span>
      <input type="number" value="" class="form__input js-input" data-validate="require" data-success="0">
    </label>
  </div>
  <input type="submit" value="Сохранить" class="btn btn-140 btn-mod-inline-block btn-submit--disabled">
</form>
<form class="form form-mod-no-padding">
  <div class="form__item form__item-mod-inline-block form__item-330 form__item-mod-margin-bottom-25">
    <label for="" class="form__label form__label-mod-inline-block">
      <span class="form__desc">Текст *</span>
      <input type="text" placeholder="текст" class="form__input js-input" data-validate="require" data-success="0">
    </label>
  </div>
  <div class="form__item form__item-mod-inline-block form__item-170 form__item-mod-margin-bottom-25">
    <label for="" class="form__label">
      <span class="form__desc">Время *</span>
      <input type="number" value="" class="form__input js-input" data-validate="require" data-success="0">
    </label>
  </div>
  <input type="submit" value="Сохранить" class="btn btn-140 btn-mod-inline-block btn-submit--disabled">
</form>

3
  • так у меня получалось сделать, то есть все поля заполнены и кнока работает, но необходимо, чтобы формы были независимы друг от друга
    – Jarvis
    16 июн 2016 в 10:30
  • @Jarvis поправил, теперь независимо всё
    – ampawd
    16 июн 2016 в 10:36
  • благодарю, это ответ
    – Jarvis
    16 июн 2016 в 10:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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