Question

我在表格中使用Zurb的基础数据，并希望禁用提交按钮，直到表单有效（例如有效的电子邮件地址）。

最好的方法是什么？

谢谢，

约翰

Answer 1

您可以在提交按钮上使用javascript来防止默认行为。然后，您可以听取'formvalid.zf.abide'和'forminvalid.zf.abide'提交或添加自定义错误处理

<form data-abide novalidate id="testform">
  <label>
    Amount
    <div class="input-group">
      <span class="input-group-label">$</span>
      <input class="input-group-field" id="exampleNumberInput" type="number" required pattern="number"/>

    <span class="form-error" data-form-error-for="exampleNumberInput">Amount is required.</span>
    </div>
  </label>
</form>

//add event handler to your submit button to prevent the form submit
//and call abide validation
$('#submit').on('click', function(e){
  e.preventDefault()
  console.log('submit clicked')
  $('#testform').foundation('validateForm')
})

//listen for the abide validation event and submit form
$(document).on('formvalid.zf.abide', function(event, form){
  console.log('form is valid')
  form.submit()
})

禁用按钮Zurb基金会

1 个答案: