关键词:
【中文标题】如何禁用提交按钮,直到所有文本字段都已满并选择文件【英文标题】:How to disable submit button until all text fields are full and file is selected 【发布时间】:2016-03-03 14:19:09 【问题描述】:我是 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/
【问题讨论】:
【参考方案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
【讨论】:
感谢修复了 jsfiddle,但由于某种原因,它不适用于我的实际代码......这有什么可能的原因吗?它在一个表单中,使用在焦点上删除的占位符文本,使用自定义按钮并在单击时将值插入数据库。这些会导致它不起作用吗? 表单上的输入字段是动态创建的吗?如果是,请尝试通过以下方式委派这些:$(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]:
【讨论】:
【参考方案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;
请注意,我已经删除了 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)浏览器,这将阻止表单提交。
【讨论】:
【参考方案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>
【讨论】:
【参考方案5】:对于我的方法,如果所有条件都是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);
);
);
Fiddle
【讨论】:
仅当所有文本字段都已填写时才在 Swift 中启用按钮
...发布时间】:2016-01-2207:17:44【问题描述】:我无法弄清楚如何更改我的代码,以便在填写我的三个文本字段时启用导航栏中的“完成”按钮。我目前有三个UITextField和一个UIButtonItem。habitNameField和goalFiel 查看详情
AngularJS:输入字段为空时禁用按钮
】AngularJS:输入字段为空时禁用按钮【英文标题】:AngularJS:disablebuttonwheninputfieldsareempty【发布时间】:2016-10-2604:37:21【问题描述】:我有一个下拉菜单、两个输入文本框和一个提交按钮。我希望禁用提交按钮,直到选择下拉项... 查看详情
jquery:重置后禁用/启用按钮不起作用
】jquery:重置后禁用/启用按钮不起作用【英文标题】:jquery:Disable/Enablebuttonnotworkingafterreset【发布时间】:2012-05-2906:01:16【问题描述】:我有一个表单,其中包含n个单选按钮(使用jquery-ui)。在允许用户提交表单之前,我想确... 查看详情
禁用按钮,直到所有表单字段都填写在 Formik
】禁用按钮,直到所有表单字段都填写在Formik【英文标题】:DisablebuttontillalltheformfieldsgetfilledinFormik【发布时间】:2020-11-1202:41:45【问题描述】:我正在使用Formik表单。我里面有两个字段。我需要禁用保存按钮,直到两个字段都... 查看详情
使用 jQuery 禁用提交按钮,直到字段和至少一个复选框具有值
】使用jQuery禁用提交按钮,直到字段和至少一个复选框具有值【英文标题】:DisablesubmitbuttonwithjQueryuntilfieldandatleastonechceckboxhavevalues【发布时间】:2021-03-1806:29:53【问题描述】:想象一下时事通讯订阅表格。我的表单只有两种不... 查看详情
如果文本字段中没有文本,如何禁用按钮? [关闭]
】如果文本字段中没有文本,如何禁用按钮?[关闭]【英文标题】:Howtodisablebuttonifnotextintextfield?[closed]【发布时间】:2014-02-2423:39:51【问题描述】:我需要有关我在Xcode中制作的应用程序的帮助。我的应用程序中有一个注释提交... 查看详情
用户在 Swift 中提交所有文本字段后如何启用按钮
】用户在Swift中提交所有文本字段后如何启用按钮【英文标题】:HowtoenablebuttonafteruserfiledallthetextfieldsinSwift【发布时间】:2020-05-0709:43:36【问题描述】:我正在做SwiftiOS应用程序。在那,我有一些注册屏幕。在那,我有3个文本字... 查看详情
禁用表单按钮,直到所有字段都填写完 rails 5.1
】禁用表单按钮,直到所有字段都填写完rails5.1【英文标题】:Disableformbuttonuntilallfieldarefilledoutrails5.1【发布时间】:2018-01-2219:53:39【问题描述】:我有以下表格,我正在寻找一种解决方案来禁用按钮,直到表格中的所有字段都... 查看详情
如何使用 jquery 启用表单的提交按钮?
】如何使用jquery启用表单的提交按钮?【英文标题】:HowdoIenablemyform\'ssubmitbuttonusingjquery?【发布时间】:2017-05-2119:32:06【问题描述】:我有一个带有一些输入字段和一个下拉列表(选择字段)的基本表单。几乎所有字段都有一种... 查看详情
如何根据复选框状态禁用/启用提交按钮?
】如何根据复选框状态禁用/启用提交按钮?【英文标题】:Howtodisable/enablesubmitbuttondependingoncheckboxstate?【发布时间】:2019-06-0216:04:37【问题描述】:有一个包含两个文本字段和一个复选框的表单,它们都是必需的并且具有required... 查看详情
如何在提交按钮上获取 amx 迭代器所有文本框值
】如何在提交按钮上获取amx迭代器所有文本框值【英文标题】:HowtogetamxiteratoralltextboxvaluesonSubmitButton【发布时间】:2016-08-2506:36:43【问题描述】:我想在单击提交按钮时获取所有文本框、选择框、单选按钮值。所有输入元素都... 查看详情
禁用下一页按钮,直到所有单选按钮组都得到答复
...发布时间】:2014-06-0903:53:06【问题描述】:我试图弄清楚如何禁用“下一部分”按钮,直到所有三组单选按钮都得到回答。我已经详细搜索了一个解决方案,但大多数是指提交表单的时间。我正在尝试对其进行配置,以便在回答... 查看详情
禁用基于三个文本框字段的按钮
...很陌生,所以我担心我的问题可能是基本的,但我不确定如何解决它。我有一个带有三个文本框字段和一个按钮的winform。必须先填写所有文本框字段,然后用户才能单击按钮继续。为此,只要至少有一个空文本框,我想禁用该... 查看详情
如果三个特定下拉字段中的三个都为空,则禁用提交按钮
...在做出选择之前禁用提交。但是我无法弄清楚也无法找到如何将其调 查看详情
php隐藏recaptchaiframe并禁用提交按钮,直到电子邮件字段为有效电子邮件。同样绝对定位以避免风格冲突。(代码片段)
如果文本字段为空,如何禁用按钮?
】如果文本字段为空,如何禁用按钮?【英文标题】:Howtodisableabuttonifatextfieldisempty?【发布时间】:2015-12-1016:13:14【问题描述】:如果文本字段中没有任何内容,我正在尝试禁用继续按钮。这是我的代码...importUIKitclassViewController... 查看详情
如果子组件字段无效,如何禁用父组件表单提交按钮
】如果子组件字段无效,如何禁用父组件表单提交按钮【英文标题】:HowtodisableParentComponentFormSubmitbuttonifchildcomponentfieldsarenotvalid【发布时间】:2019-01-0303:39:33【问题描述】:我正在使用模板驱动表单。父组件HTML<form#BasicForm="ng... 查看详情
禁用引导验证器提交按钮,直到整个表单有效
】禁用引导验证器提交按钮,直到整个表单有效【英文标题】:disablingbootstrapvalidatorsubmitbuttonuntilentireformisvalid【发布时间】:2015-01-0622:51:09【问题描述】:我已在***上搜索此问题的解决方案,但没有找到可行的解决方案。我正... 查看详情