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

Question

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

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

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/

Answer 1

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

$(':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; 
} 

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

Обновление: Событие. Вам может понадобиться прочитать this

// 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(){..}); 

DEMO

Answer 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]:

Answer 3

Хитрость заключается в том

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

Вот модифицированная версия 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) браузеров.

Answer 4

Прослушайте input события на file и text входных элементов, подсчитать количество незаполненных входов и установите 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>

Answer 5

Для моего подхода, я бы предпочел использовать 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); 
    }); 
}); 

Fiddle