I am writing a validation for forms, there may be an unlimited number of them on the page. Highlighting in red with the necessary events and the lock button made.

Now it is necessary to remove the btn-submit--disabled class from the button when the fields are filled in, which I cannot do.

Link to a working example.

 $(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>

  • $ .removeClass Try - Serge Esmanovich
  • @SergeEsmanovich I actually do it myself. I will correct the question, add more code. - Jarvis
  • It would be nice if you moved it all over here - Vlad Vlad
  • @VladVlad a couple of minutes - Jarvis
  • @VladVlad added - Jarvis

1 answer 1

You did the button selection wrong. here is the correct version

 $(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>

  • I was able to do it this way, that is, all the fields are filled out and the button works, but it is necessary that the forms be independent of each other - Jarvis
  • @Jarvis corrected, now everything is independent - ampawd
  • thank, this is the answer - Jarvis