我对 foundation 有点熟悉,我想知道如何禁用按钮,并在用户输入时验证它并更改按钮以启用提交。
表单示例:
<form data-abide>
<div class="name-field">
<label>Your name <small>required</small>
<input type="text" required pattern="[a-zA-Z]+">
</label>
<small class="error">Name is required and must be a string.</small>
</div>
<div class="email-field">
<label>Email <small>required</small>
<input type="email" required>
</label>
<small class="error">An email address is required.</small>
</div>
<input id="contactsubmit" class="button" type="submit" value="SEND" disabled>
</form>
禁用:
<input id="contactsubmit" class="button" type="submit" value="SEND" disabled>
现在,当用户继续输入时,我希望它得到验证,如果一切正确,启用按钮,我知道我可以用 jQuery .change()
来做到这一点,但是有没有遵守的标准方式?
我已经做了很多研究,但我没有看到我想要实现的目标,我可以通过 Bootstrap 验证来实现,但不是基础。
更新
这是我使用 bootstrap 实现我想要的插件,Validator.js .
最佳答案
不完全是您要查找的内容,因为除非您的表单经过验证,否则无法提交大多数表单。听取表单是否通过验证然后启用提交按钮似乎有点矫枉过正。
因此 data-abide
在创建时考虑到了这一点
If a submit event is fired, a
valid.fndtn.abide
event is triggered when the form is valid and aninvalid.fndtn.abide
event is triggered when the form is invalid.
考虑到这一点,我会启用按钮,然后
$(form)
.on('invalid.fndtn.abide', function () {
var invalid_fields = $(this).find('[data-invalid]');
// tell the user that invalid fields must be fixed before submit
})
.on('valid.fndtn.abide', function () {
// your submit action here.
});
/foundation.abide.js
中有一个选项,如果你想更改验证工作
Abide.defaults = {
validateOn: 'fieldChange', // options: fieldChange, manual, submit
尝试将其更改为手动,看看它是否像旧版本中的 'abide : {live_validate : true,//validate the form as you go
一样工作
关于javascript - 遵守禁用按钮并在 Zurb Foundation 中启用验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34055303/