如何禁用提交按钮,直到所有文本字段都已满并选择了文件
How to disable submit button until all text fields are full and file is selected
我是 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);
}
});
})()
感谢您的帮助
尝试捕获这些字段上的事件并使用另一个函数检查空值,请参见下面的代码:
$(':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 (){..});
请看这个fiddlehttps://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]:
诀窍是
- 不要禁用提交按钮;否则用户无法点击,测试将无法进行
- 仅在处理时,只有return满足所有测试才为真
这是 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;
}
}
请注意,我已删除 HTML 中 XHTML 的所有痕迹。当然,这不是必需的,但是 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)浏览器,这会阻止表单提交。
监听 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>
对于我的方法,如果所有条件都是true
,我宁愿使用array
来存储。然后用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);
});
});
我是 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);
}
});
})()
感谢您的帮助
尝试捕获这些字段上的事件并使用另一个函数检查空值,请参见下面的代码:
$(':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 (){..});
请看这个fiddlehttps://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]:
诀窍是
- 不要禁用提交按钮;否则用户无法点击,测试将无法进行
- 仅在处理时,只有return满足所有测试才为真
这是 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;
}
}
请注意,我已删除 HTML 中 XHTML 的所有痕迹。当然,这不是必需的,但是 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)浏览器,这会阻止表单提交。
监听 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>
对于我的方法,如果所有条件都是true
,我宁愿使用array
来存储。然后用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);
});
});