0

Использую плагин валидации jqueryvalidation формы.

Есть такая простая форма:

(function() {

  var app = {

    init: function() {
      this.setUpListeners();
    },

    setUpListeners: function() {

      $(document).on('submit', 'form', this.submitForm);
      $(document).on('keyup', 'input', this.removeError);
    },

    submitForm: function(e) {
      e.preventDefault();
      
      var form = $(this),
          btnSubmit = form.find('[type="submit"]');

      if (form.validate().form() === false) {
        
      
        btnSubmit.addClass('disabled');
        
        return false;
      }    

      
    },
    
    removeError: function() {
      var $this = $(this),
          formGroup = $this.closest('.form-group'),
          form = $(this).closest('form'),
          btnSubmit = form.find('[type="submit"]');

      btnSubmit.removeClass('disabled');  
    }

    
  }

  app.init();
})();
label.error {
  color:red;
  font-size: .75rem;
}

.disabled {
  border:1px solid red;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js"></script>
  
<form class="form">

  <div class="form-group">
    <input type="text" name="name-1" class="form-control" data-rule-required="true" data-msg="Ошибка при заполнении" placeholder="Ваше имя">
  </div>

  <div class="form-group">
    <input type="text" name="phone-1" class="form-control js-phone" data-rule-required="true" data-msg="Ошибка при заполнении" placeholder="Телефон">
  </div>

  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="agree-1"  data-rule-required="true" name="agree">
      
      <label class="custom-control-label" for="agree-1">
        Заполняя форму, вы соглашаетесь со всем!
      </label>
    </div>
  </div>

  <input type="submit" value="Заказать" class="btn btn-success">
  
</form>

Вопрос: Как реализовать добавление\удаления класса disable для [type="submit"] при валидных\невалидных полях формы? Сейчас класс добавляется, если поля не валидны, но не исчезает если все заполнить и чекнуть.

5
  • где this.removeError?
    – Grundy
    31 окт 2018 в 9:20
  • @Grundy, обновила, добавила removeError:
    – SVE
    31 окт 2018 в 9:25
  • @Grundy, но так disable исчезает в любом случае, просто если начинаешь что-то вводить, а должно исчезать только если все введено, отмечено и правильно\валидно
    – SVE
    31 окт 2018 в 9:26
  • а у меня исчезает, если хотя бы одно поле заполнить
    – Grundy
    31 окт 2018 в 10:31
  • @Grundy, аха, а должно исчезать, только если все правильно заполнены и появляться обратно если удалить текст в этом поле или убрать чекбокс.
    – SVE
    31 окт 2018 в 10:34

1 ответ 1

1

К сожалению данный плагин не предоставляет никаких событий на то, что валидация прошла или нет.

Однако можно обрабатывать события проверки конкретных элементов onfocusout, onkeyup, onclick и в них уже проверять валидность формы и выставлять класс кнопке.

Пример.

(function() {

  var app = {

    init: function() {
      var form = $('.form');
      var btnSubmit = form.find('[type=submit]');
      form.validate({
        onkeyup: function(...args) {
          btnSubmit.toggleClass('disabled', !this.form());
        },
        onclick: function(...args) {
          btnSubmit.toggleClass('disabled', !this.form());
        },
        onfocusout: function(...args) {
          btnSubmit.toggleClass('disabled', !this.form());
        },
        invalidHandler: function(...args) {
          btnSubmit.addClass('disabled');
        },
        submitHandler: function(form, e) {
          e.preventDefault();
          console.log('success');
        }
      });
    }



  }

  app.init();
})();
label.error {
  color: red;
  font-size: .75rem;
}

.disabled {
  border: 1px solid red;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js"></script>

<form class="form">

  <div class="form-group">
    <input type="text" name="name-1" class="form-control" data-rule-required="true" data-msg="Ошибка при заполнении" placeholder="Ваше имя">
  </div>

  <div class="form-group">
    <input type="text" name="phone-1" class="form-control js-phone" data-rule-required="true" data-msg="Ошибка при заполнении" placeholder="Телефон">
  </div>

  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="agree-1" data-rule-required="true" name="agree">

      <label class="custom-control-label" for="agree-1">
        Заполняя форму, вы соглашаетесь со всем!
      </label>
    </div>
  </div>

  <input type="submit" value="Заказать" class="btn btn-success">

</form>

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

11
  • 👍 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
    – SVE
    29 ноя 2018 в 7:23
  • @HamSter, обрати внимание, что код настройки плагина чуть поменялся, по сравненнию с твоим :-)
    – Grundy
    29 ноя 2018 в 7:40
  • Я вижу, но времени нет проверить в своем проекте, поэтому позже буду еще смотреть! Тут работает все отлично)
    – SVE
    29 ноя 2018 в 8:28
  • я правильно понимаю, что тут $.ajax({ url: 'contacts.php', ajax обработку в submitHandler: function(form, e) { ... нужно вставить?
    – SVE
    18 апр 2019 в 12:25
  • вот такая куча-мала jsbin.com/pakuger/edit?html,js,output получилась и работает, но .... явно что-то не так)))))
    – SVE
    18 апр 2019 в 13:00

Ваш ответ

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

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