必填字段为空时禁用按钮
必填字段为空时禁用按钮
提问于 2016-08-01 14:19:15
我正在为表单使用this模板。对于文本输入，它提供了验证输入的机会(很简单:如果为空，则为红色框，如果不为空，则为绿色框)。然而，我希望我的提交按钮(下面的标记)只有在所有必需的字段至少不为空的情况下才是可点击的。
<button type="submit" name="finish" class="waves-effect waves-light btn">问候
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-08-01 14:46:19
使用oninput立即反映输入中的更改，并检查是否有任何输入为空。
HTML
<form id="frm">
<input type="text" name="input1" oninput="testFinish();" />
<input type="text" name="input2" oninput="testFinish();" />
<button type="submit" name="finish" disabled onsubmit="alert('SUBMITTED')">Finish</button>
</form>JAVASCRIPT
function testFinish(){
var frm = document.getElementById('frm');
if (frm['input1'].value && frm['input2'].value)
frm['finish'].disabled = false;
}Stack Overflow用户
发布于 2016-08-01 14:44:41
我在这里发布了一个简单的演示，因为我不想深入到模板中。
逻辑很简单。您需要“监听”输入的事件change和keypress，然后检查它是否有效(我在上一次Chrome中测试了代码，需要在其他浏览器中检查此验证API，或者创建您自己的，或者使用库)。如果是，请删除属性disabled。如果不是，请添加它。
var inputs = document.querySelectorAll('input'),
button = document.querySelector('button');
addListenerMulti(inputs, 'keyup change', function() {
if (valid()) {
button.removeAttribute('disabled');
}
else {
button.setAttribute('disabled', 'disabled');
}
});
function valid() {
var valid = true;
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].validity.valid) {
valid = false;
}
}
return valid;
}
function addListenerMulti(el, s, fn) {
var col = el.length ? el : [el];
var evts = s.split(' ');
for (var k = 0; k < col.length; k++) {
for (var i = 0, iLen = evts.length; i < iLen; i++) {
col[k].addEventListener(evts[i], fn, false);
}
}
}<form>
<input type="text" required /><br />
<input type="text" required /><br />
<button disabled>Submit</button>
</form>
Stack Overflow用户
发布于 2016-08-01 14:30:31
我现在不在我的桌面上，但我只是为你提供了一个基本的布局，你需要做什么，..if，你需要更多的帮助在评论中提到。
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38692115
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号