如何禁用某些输入字段未填写的按钮?
问题描述:
IBM Web体验工厂使用dojo库,我想知道如果我在消费者模型中设置<input type="text" name="usrname" required>
,如果输入未填充,按钮仍然工作吗?如何禁用某些输入字段未填写的按钮?
答
那么,HTMLFormElement
有一个方法,你可以使用checkValidity()
。
所以,你的情况,你可以使用:input
选择与dojo/query
查询表单内的所有输入元素(包括按钮,复选框,文本框,文本区域和选择框),然后使用onChange
事件来检查表单有效并更改按钮disabled
属性。
例如:
query("[name=myForm] :input").on("change", function(evt) {
var isInvalid = !evt.target.form.checkValidity();
query("button[type=submit]").attr("disabled", isInvalid);
});
现在你需要做的是确保您的按钮最初是禁用/启用取决于形式的初始状态。
完整的例子可以在JSFiddle上找到:http://jsfiddle.net/j8L6j77g/