Отключить кнопку отправки, пока поля ввода не будут заполнены

Ответ 1

Связывание вашего события только с готовым документом.

Таким образом, нет никакого слушателя, когда вы что-то меняете.

Сделайте это вместо:

$(document).ready(function (){
    validate();
    $('#inputName, #inputEmail, #inputTel').change(validate);
});

function validate(){
    if ($('#inputName').val().length   >   0   &&
        $('#inputEmail').val().length  >   0   &&
        $('#inputTel').val().length    >   0) {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
    }
}

Ответ 2

Ваш текущий код в порядке, но не отвечает на пользовательские события, в которых вы отключились.

$('#inputName, #inputEmail, #inputTel').keyup(function(){
    if($(this).val().length > 0){
        $("input[type=submit]").prop("disabled", false);
    }else{
        $("input[type=submit]").prop("disabled", true);
    }
});

Изменить, это не сработает. потому что один из этих элементов заставит эту кнопку отправить, чтобы активироваться, независимо от других. Я буду исправлять на мгновение.

Изменить. Здесь черновой вариант исправления, возможно, он будет красивее, но определенно станет хорошей отправной точкой.

var toValidate = $('#inputName, #inputEmail, #inputTel'),
    valid = false;
toValidate.keyup(function () {
    if ($(this).val().length > 0) {
        $(this).data('valid', true);
    } else {
        $(this).data('valid', false);
    }
    toValidate.each(function () {
        if ($(this).data('valid') == true) {
            valid = true;
        } else {
            valid = false;
        }
    });
    if (valid === true) {
        $('input[type=submit]').prop('disabled', false);
    }else{
        $('input[type=submit]').prop('disabled', true);        
    }
});

И вот ваш jsFiddle, иллюстрирующий этот метод

Ответ 3

измените свойство кнопки, а не атрибут... используйте prop() вместо attr()

$(document).ready(function (){
  if ($('#inputName, #inputEmail, #inputTel').val().length > 0) {
    $("input[type=submit]").prop("disabled", false);
  }
  else {
    $("input[type=submit]").prop("disabled", true);
  }
});

и я предполагаю, что это не имеет смысла, поскольку у вас нет привязки к событию на нем.. это будет проверять только, имеет ли вход значение в документе. Уже или нет.. однако привязка события или нет, что зависит от вас. но по этой причине prop() был введен в более поздней версии jquery...

обновляется

после просмотра комментариев ниже,

$(function(){
  validate();
  $('input[type="text"]').keyup(validate); //you can use your multiple id selector instead of the attribute selector that i am using
});

function validate() {
  var inputvalue = $('input[type="text"]').filter(function (n) {
     return this.value.length > 0;
  })

  if (inputvalue.length == $('input[type="text"]').length) {
     $("input[type=submit]").prop("disabled", false);
  } else {
     $("input[type=submit]").prop("disabled", true);
  }
}

это должно работать для любого количества входов с типом как текст (не нужно вообще изменять коды javascript/jquery)... здесь fiddle

Ответ 4

вам нужно снова запустить команду if, чтобы включить это, что можно сделать при событии change ввода

function updateSubmit(){
  if ($('#inputName').val().length+$('#inputEmail').val().length+$('#inputTel').val().length > 2) {
     $("input[type=submit]").prop("disabled", false);
   }
   else {
     $("input[type=submit]").prop("disabled", true);
   }
}

$(document).ready(function (){
  updateSubmit();
  $('#inputName, #inputEmail, #inputTel').on('change',function(){
   updateSubmit();
  });
});

Ответ 5

Я пытался следовать этой теме, чтобы реализовать это с помощью специальной формы полосы.

Это мой код:

$(document).ready(function (){
  validate();
  $('#EMAIL, #FNAME, #LNAME, #card-element').change(validate);
});

function validate(){
    if ($('#EMAIL').val().length   >   0   &&
        $('#FNAME').val().length  >   0   &&
        $('#LNAME').val().length    >   0  &&
        $('#card-element').hasClass('StripeElement--complete')
        ){
        $("button[type=button]").prop("disabled", false);
    }
    else {
        $("button[type=button]").prop("disabled", true);
    }
}

Ответ 6

Этот код будет проверять типы ввода для текстового поля, электронной почты и флажка, отлично работает с моей стороны, а также, если поля ввода скрыты, будет проверять только видимые поля.

  var register_disable = false;
  jQuery("#SUBMIT_BUTTON-ID").prop('disabled', register_disable);
  jQuery("input[type!='submit']").bind('keyup change', function () {
    jQuery("input[type='text'], input[type='email']").not(':input:hidden').each(function () {
      if (jQuery(this).val().trim() == "" || !$("input[type='checkbox']").is(':checked')) {
        register_disable = true;
      }
    });
    jQuery("#SUBMIT_BUTTON-ID").prop('disabled', register_disable);
    register_disable = false;
  });

Ответ 7

Используйте форму onsubmit. Хороший и чистый. Вам не нужно беспокоиться об изменениях и срабатывании событий нажатия клавиш. Не нужно беспокоиться о проблемах с клавиатурой и фокусом.

http://www.w3schools.com/jsref/event_form_onsubmit.asp

<form action="formpost.php" method="POST" onsubmit="return validateCreditCardForm()">
   ...
</form>

function validateCreditCardForm(){
    var result = false;
    if (($('#billing-cc-exp').val().length > 0) &&
        ($('#billing-cvv').val().length  > 0) &&
        ($('#billing-cc-number').val().length > 0)) {
            result = true;
    }
    return result;
}