如果数据验证错误不起作用，则禁用提交按钮
如果数据验证错误不起作用，则禁用提交按钮
提问于 2016-09-15 14:50:56
我正在使用Jquery表单验证器来验证表单中的一些输入字段，我试图实现的是，如果用户没有验证所有字段，则提交按钮应该不会被用户单击(应该禁用)。
这就是我得到验证的地方。http://www.formvalidator.net/index.html#advanced_toggleDisabled
以下是代码，但我仍然可以单击submit按钮。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="POST">
<p>
User name (4 characters minimum, only alphanumeric characters):
<input data-validation="length alphanumeric" data-validation-length="min4">
</p>
<p>
Year (yyyy-mm-dd):
<input data-validation="date" data-validation-format="yyyy-mm-dd">
</p>
<p>
Website:
<input data-validation="url">
</p>
<p>
<button type="submit" value="Login">BIG BUTTOn</button>
</p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
$.validate({
lang: 'en'
});
$.validate({
modules : 'toggleDisabled',
disabledFormFilter : 'form.toggle-disabled',
showErrorDialogs : false
});
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-15 15:00:43
首先，你的表单没有你想要的“切换禁用”类。
<form action="#" method="POST" class="toggle-disabled">
Then you need to disabled the button initially. The plugin will later enable it.
<button type="submit" value="Login" disabled="disabled">BIG BUTTOn</button>
Working code:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="POST" class="toggle-disabled">
<p>
User name (4 characters minimum, only alphanumeric characters):
<input data-validation="length alphanumeric" data-validation-length="min4">
</p>
<p>
Year (yyyy-mm-dd):
<input data-validation="date" data-validation-format="yyyy-mm-dd">
</p>
<p>
Website:
<input data-validation="url">
</p>
<p>
<button type="submit" value="Login" disabled>BIG BUTTOn</button>
</p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
$.validate({
lang: 'en'
});
$.validate({
modules: 'toggleDisabled',
disabledFormFilter: 'form.toggle-disabled',
showErrorDialogs: true
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39504690
复制相关文章
相似问题
腾讯云开发者
