0

Необходимо, чтобы кнопка submit разблокировалась только при всех выполненных условиях, как это реализовать?

Ссылка на сайт: http://test.truskahouses.in.ua/pura/

$(document).ready(function(){
  var patternmail = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
  var mail = $('#mail');
  var name = $('#firstname');
  var lname = $('#lastname');
  var phone = $('#phone');
  var text = $('#text');
  $('.alert-danger').hide(1);


  mail.blur(function(){
    if(mail.val() != ''){
        if(mail.val().search(patternmail) == 0){
          $('#alertmail').hide(1)
          $('#submit').attr('disabled', false);
          mail.removeClass('error').addClass('ok');
          $('#mail').css('border', 0);
        }else{
          $('#alertmail').show(1)
          $('#mail').css('border', '2px solid #cc3b3b');
          $('#submit').attr('disabled', true);
          mail.addClass('ok');
        }
      }else{
        mail.addClass('error');
        $('#submit').attr('disabled', true);
      }
  });

  name.blur(function(){
    if(name.val() != ''){
        if(name.val().length >= 3){
          $('#alertname').hide(1)
          $('#submit').attr('disabled', false);
          name.removeClass('error').addClass('ok');
          $('#firstname').css('border', 0);
        }else{
          $('#alertname').show(1)
          $('#firstname').css('border', '2px solid #cc3b3b');
          $('#submit').attr('disabled', true);
          name.addClass('ok');
        }
      }else{
        name.addClass('error');
        $('#submit').attr('disabled', true);
      }
  });

  lname.blur(function(){
    if(lname.val() != ''){
        if(lname.val().length >= 3){
          $('#alertlname').hide(1)
          $('#submit').attr('disabled', false);
          lname.removeClass('error').addClass('ok');
          $('#lastname').css('border', 0);
        }else{
          $('#alertlname').show(1)
          $('#lastname').css('border', '2px solid #cc3b3b');
          $('#submit').attr('disabled', true);
          lname.addClass('ok');
        }
      }else{
        lname.addClass('error');
        $('#submit').attr('disabled', true);
      }
  });

    phone.blur(function(){
        if(phone.val() != ''){
            if(phone.val().length >= 9 ){
                $('#alertphone').hide(1)
                $('#submit').attr('disabled', false);
                phone.removeClass('error').addClass('ok');
                $('#phone').css('border', 0);
            }else{
                $('#alertphone').show(1)
                $('#phone').css('border', '2px solid #cc3b3b');
                $('#submit').attr('disabled', true);
                phone.addClass('ok');
            }
        }else{
            phone.addClass('error');
            $('#submit').attr('disabled', true);
        }
    });

    text.blur(function(){
        if(text.val() != ''){
            if(text.val().length >= 10){
                $('#alerttext').hide(1)
                $('#submit').attr('disabled', false);
                text.removeClass('error').addClass('ok');
                $('#text').css('border', 0);
            }else{
                $('#alerttext').show(1)
                $('#text').css('border', '2px solid #cc3b3b');
                $('#submit').attr('disabled', true);
                text.addClass('ok');
            }
        }else{
            text.addClass('error');
            $('#submit').attr('disabled', true);
        }
    });

});

1 ответ 1

1
  1. Вешаем проверку по всем input по нажатию на клавишу на все поля
  2. Добавляем переменную со значением true
  3. Если где-то не проходит проверку, меняем значение переменной на false
  4. В конце проверяем переменную: если она равна true, то разблокируем кнопка, если false - то блокируем

$(document).ready(function() {
  var patternmail = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
  var mail = $('#mail');
  var name = $('#firstname');
  var lname = $('#lastname');
  var phone = $('#phone');
  var text = $('#text');

  var allInputs = $('#mail, #firstname, #lastname, #phone, #text');

  $('.alert-danger').hide(1);

  allInputs.on('input', function() {
    var resolution = true;
  
    if (mail.val() != '') {
      if (mail.val().search(patternmail) == 0) {
        $('#alertmail').hide(1)
        $('#submit').attr('disabled', false);
        mail.removeClass('error').addClass('ok');
        $('#mail').css('border', 0);
      } else {
        $('#alertmail').show(1)
        $('#mail').css('border', '2px solid #cc3b3b');
        mail.addClass('ok');

        resolution = false;
      }
    } else {
      mail.addClass('error');

      resolution = false;
    }

    if (name.val() != '') {
      if (name.val().length >= 3) {
        $('#alertname').hide(1)
        name.removeClass('error').addClass('ok');
        $('#firstname').css('border', 0);
      } else {
        $('#alertname').show(1)
        $('#firstname').css('border', '2px solid #cc3b3b');

        resolution = false;

        name.addClass('ok');
      }
    } else {
      name.addClass('error');

      resolution = false;
    }

    if (lname.val() != '') {
      if (lname.val().length >= 3) {
        $('#alertlname').hide(1)
        lname.removeClass('error').addClass('ok');
        $('#lastname').css('border', 0);
      } else {
        $('#alertlname').show(1)
        $('#lastname').css('border', '2px solid #cc3b3b');

        resolution = false;

        lname.addClass('ok');
      }
    } else {
      lname.addClass('error');

      resolution = false;
    }

    if (phone.val() != '') {
      if (phone.val().length >= 9) {
        $('#alertphone').hide(1)
        phone.removeClass('error').addClass('ok');
        $('#phone').css('border', 0);
      } else {
        $('#alertphone').show(1)
        $('#phone').css('border', '2px solid #cc3b3b');

        resolution = false;

        phone.addClass('ok');
      }
    } else {
      phone.addClass('error');

      resolution = false;
    }

    if (text.val() != '') {
      if (text.val().length >= 10) {
        $('#alerttext').hide(1)
        text.removeClass('error').addClass('ok');
        $('#text').css('border', 0);
      } else {
        $('#alerttext').show(1)
        $('#text').css('border', '2px solid #cc3b3b');

        resolution = false;

        text.addClass('ok');
      }
    } else {
      text.addClass('error');

      resolution = false;
    };
    
    if(resolution === true){
      $('#submit').removeAttr('disabled');
    }else{
      $('#submit').attr('disabled', '');
    };
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="alertmail" class="alert-danger"></div>

<p>mail: <input type="text" id="mail"></p>
<p>firstname: <input type="text" id="firstname"></p>
<p>lastname: <input type="text" id="lastname"></p>
<p>phone: <input type="text" id="phone"></p>
<p>text: <input type="text" id="text"></p>

<p><input type="submit" id="submit" disabled></p>

6
  • Юрий, у нас проблемы)) Залили, теперь он просто не даёт отправить в любом случае :)
    – user234223
    5 июл 2017 в 16:21
  • @user234223, тут-то работает :) Я проверил
    – Yuri
    5 июл 2017 в 16:25
  • @user234223, заметил ошибку, но она была в HTML, а не JS...
    – Yuri
    5 июл 2017 в 16:26
  • Всё работает...
    – Yuri
    5 июл 2017 в 16:26
  • да я там немного накосячил, спасибо)
    – user234223
    5 июл 2017 в 16:51

Ваш ответ

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

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