如何禁用提交按钮，直到所有文本字段都已满，选择文件

Question

我是新来的JavaScript/jQuery的，所以我可能失去了一些东西很明显，但我发现，禁用提交按钮，直到所有文本字段是解决方案满了，我发现，禁用它，直到选定文件的解决方案。然而，我的形式包括文件输入和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/

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

诀窍是

• 没有禁用提交按钮;否则用户不能点击它，测试将无法正常工作只
• 加工时，只有返回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）浏览器。

Answer 4

请收听file和text输入元素input事件，算的未填充的投入数量，设定基于该号码提交按钮的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