我已经搜索过,但我得到了有关如何禁用提交按钮直到所有字段
完成的信息....
我有以下表单,其中一些字段是必填
,有些字段是可选
。
我想禁用提交按钮,直到完成必填
字段。
表单示例代码:
<form name="registration_form" id="registration_form" action="nextaction.php" method="post" enctype="multipart/form-data" >
Name : <input type="text" id="name" name="name" required>
Email : <input type="text" id="name" name="name" required>
Mobile : <input type="text" id="mobile" name="mobile" required>
Gender : <input type="text" id="gender" name="gender" >/*optional*/
Occupation : <input type="text" id="occupation" name="occupation" >/*optional*/
City : <input type="text" id="city" name="city" required>
Avatar : <input type="file" id="avatar" name="avatar" required>
<input type="submit" class="link-button-blue" id="register" value="PROCEED TO NEXT STEP" />
==========
已编辑
我尝试提交禁用直到所有字段完成如下:
第一件事:
<input type="submit" class="link-button-blue" id="register" value="PROCEED TO NEXT STEP" disabled="disabled" />
脚本:
<script>
$(document).ready(function (){
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
});
</script>
最佳答案
$('#registration_form input[required]').on('input propertychange paste change', function() {
var empty = $('#registration_form').find('input[required]').filter(function() {
return this.value == '';
});
$('#register').prop('disabled', (empty.length));
});
https://jsfiddle.net/ot5kn5c7/
这应该有效。
每当任何必需的输入发生任何变化时,都会检查非空的必填字段的数量。一旦有 0 个所需的空输入,就会更新按钮的禁用属性。 (0 评估为 false)
如果您没有禁用该按钮,而只想阻止表单提交,则可以附加到表单上的提交事件,并使用类似的逻辑检查长度来阻止默认操作。
$('form').on('submit', function(e) {
var empty = $(this).find('input[required]').filter(function() {
return this.value == '';
});
if (empty.length) {
e.preventDefault();
alert('enter all required field!')
}
});
关于javascript - 如何禁用提交,直到仅填写必填字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34682972/