在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验证而不是基础来实现.

UPDATE

这是我用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旧版本中那样工作