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

Question

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

表格示例：

<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。

Answer 1

不完全是您要查找的内容，因为除非您的表单经过验证，否则无法提交大多数表单。听取表单是否通过验证然后启用提交按钮似乎有点矫枉过正。

因此 data-abide 在创建

时考虑到了这一点

If a submit event is fired, a valid.fndtn.abide event is triggered when the form is valid and an invalid.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一样工作

Answer 2

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

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

Abide disable button and enable on validation in Zurb Foundation

html

javascript

css

jquery

zurb-foundation

更新