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

Я новичок в javascript / jquery, поэтому я могу пропустить что-то очевидное, но я нашел решения, которые отключают кнопку submit, пока все текстовые поля не заполнены, и я нашел решения, которые отключают ее, пока не выбран файл. Однако моя форма состоит из ввода файла и 3 текстовых полей, и я не могу найти способ отключить ее, пока не будут выбраны все текстовые поля и файл.

Дистиллированная версия кода, с которой я работаю, является здесь:

HTML 

    <div>
    <input type="file" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="Upload" class="submit" id="submit" disabled="disabled" />
    </div>

JS 

    $('.submit').click(function() {
var empty = $(this).parent().find("input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {

        $('.submit').prop('disabled', false);
    }
    });
})()

Спасибо за помощь

Https://jsfiddle.net/xG2KS/482/

5 3
javascript jquery disabled-input form-submit

5 ответов:

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

$(':input').on('change keyup', function () {
  // call the function after
  // both change and keyup event trigger
  var k = checking();
  // if value inc not 0
  if (k) $('.submit').prop('disabled', true);
  // if value inc is 0
  else $('.submit').prop('disabled', false);
});

// this function check for empty values
function checking() {
  var inc = 0;
  // capture all input except submit button
  $(':input:not(:submit)').each(function () {
    if ($(this).val() == "") inc++;
  });
  return inc;
}

Это всего лишь пример, но логика как-то такова.

Обновление : Делегирование Событий. возможно, Вам понадобится прочитать это

 // document -> can be replaced with nearest parent/container
 // which is already exist on the page,
 // something that hold dynamic data(in your case form input)
 $(document).on('change keyup',':input', function (){..});

Демо-версия

2

Пожалуйста, посмотрите эту скрипку https://jsfiddle.net/xG2KS/482/ 

$('input').on('change',function(){
    var empty = $('div').find("input").filter(function() {
            return this.value === "";
        });

        if(empty.length>0) {

            $('.submit').prop('disabled', true);
        }
    else{
        $('.submit').prop('disabled', false);
    }
});

[1]:

1

Фокус в том, что

  • не отключайте кнопку submit, иначе пользователь не сможет нажать на нее и тестирование не будет работать
  • только при обработке, только возвращает true, если все тесты выполнены

Вот модифицированная версия HTML: 

<form id="test" method="post" enctype="multipart/form-data" action="">
    <input type="file" name="file"><br>
    <input type="text" name="name"><br>
    <input type="text" name="email"><br>
    <button name="submit" type="submit">Upload</button>
</form>

И немного чистого JavaScript: 

window.onload=init;
function init() {
    var form=document.getElementById('test');
    form.onsubmit=testSubmit;

    function testSubmit() {
        if(!form['file'].value) return false;
        if(!form['name'].value) return false;
        if(!form['email'].value) return false;
    }
}

Обратите внимание, что я удалил все следы XHTML в HTML. Конечно, в этом нет необходимости, но HTML5 позволяет использовать более простую версию вышеописанного, без JavaScript. Просто используйте атрибут required: 

<form id="test" method="post" enctype="multipart/form-data" action="">
    <input type="file" name="file" required><br>
    <input type="text" name="name" required><br>
    <input type="text" name="email" required><br>
    <button name="submit" type="submit">Upload</button>
</form>

Это предотвращает отправку формы, если требуемое поле пусто и работает для всех современных (не IE8) браузеров.

1

Прослушайте событие input на элементах ввода file и text, подсчитайте количество незаполненных входов и установите свойство кнопки submit disabled на основе этого числа. Ознакомьтесь с демонстрацией ниже.

$(':text,:file').on('input', function() {
    //find number of unfilled inputs
    var n = $(':text,:file').filter(function() {
        return this.value.trim().length == 0;
    }).length;
    
    //set disabled property of submit based on number
    $('#submit').prop('disabled', n != 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <input type="file" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="Upload" class="submit" id="submit" disabled="disabled" />
</div>
1

Для моего подхода я бы предпочел использовать array для хранения, если все условия true. Затем используйте every, чтобы убедиться, что все true 

$(function(){
    function validateSubmit()
    {
       var result = [];
       $('input[type=file], input[type=text]').each(function(){
          if ($(this).val() == "")
            result.push(false);
          else
            result.push(true);
       });
       return result;
    }

    $('input[type=file], input[type=text]').bind('change keyup', function(){
       var res = validateSubmit().every(function(elem){
          return elem == true;
       });

       if (res)
        $('input[type=submit]').attr('disabled', false);
       else
        $('input[type=submit]').attr('disabled', true);
    });
});

Скрипка

1