时间戳

首页 > 解决方案 > 通过使用 jquery 进行表单验证来禁用和启用按钮

javascript - 通过使用 jquery 进行表单验证来禁用和启用按钮

问题描述

我有一个div包含必需元素的

<div id="test">
  <input type="text" required/>
  ...
  </div>
    <input type="button" name="previous"
    class="previous action-button-previous" value="Previous" /> <input
    type="button" name="next" class="next action-button"
    value="Next" />

  ...

我想Next通过表单验证启用或禁用按钮（如果所有必填字段都可以）

我用过这个方法

<script>
  function validateForm() {
    var searchEles = document.getElementById('test')
      .getElementsByTagName('input');
    var searchEles2 = document.getElementById('test')
      .getElementsByTagName('select');

    for (var i = 0; i < searchEles.length; i++) {
      if (searchEles[i].getAttribute("required") != null) {
        alert("il est required "); //He is required
      } else {
        alert("il est n'est pas required "); //He is not
      }
    }
    for (var i = 0; i < searchEles2.length; i++) {

      if (searchEles2[i].getAttribute("required") != null) {
        alert("il est required ");
      } else {
        alert("il est n'est pas required ");
      }
    }
  }
</script>

是否可以将其用作禁用功能？！？

标签： javascriptjquery

解决方案

有很多方法。

1）本质上一个简单的策略是：

  • 禁用下一个按钮以开始
  • 利用更改功能从您的表单中捕获更改事件，并运行您的验证器功能。如果有效 => 启用您的下一个按钮

PS：如果你没有加载 jquery，你总是可以使用 vanilla JS 来捕获事件。你真的不需要 jQuery。

2) jQuery 验证插件

它正是为此目的的解决方案，并且由于您有 jquery 标记，因此您可以考虑一个选项。你可以试试这个SO post一个简单的实现

推荐阅读