Question

我对基础知识有点熟悉，我想知道如何禁用该按钮，并且当用户输入验证时它会被验证并更改按钮以启用提交。

表单示例：

 <input id="contactsubmit" class="button" type="submit" value="SEND" disabled>

停用

.change()

现在，当用户继续输入时，我希望它能够被验证，如果一切正确，启用按钮，我知道我可以用jQuery {{1}}做到这一点，但有没有任何标准的方法可以遵守？< / p>

我已经做了很多研究，但是我没有看到我想要实现的目标，我可以通过bootstrap验证而不是基础来实现。

更新

这是我使用bootstrap实现我想要的插件Validator.js。

Answer 1

不太符合您的要求，因为除非您的表单经过验证，否则无法提交大多数表单。听取表单是否验证然后启用提交按钮似乎是过度杀伤。

因此data-abide在创建

时会考虑到这一点

如果触发了提交事件，则会触发valid.fndtn.abide事件当表单有效并触发invalid.fndtn.abide事件时当表格无效时。

考虑到这一点，我会启用按钮然后

$(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类似

Answer 2

<a href="#" class="button disabled">Disabled Button</a>

在Zurb Foundation中禁用禁用按钮并启用验证

更新

2 个答案: