Question

我有一个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>

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

Answer 1

有很多方法。

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

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

PS：如果没有加载jquery，则可以始终使用原始JS捕获事件。您真的不需要jQuery。

2）jQuery Validation Plugin

它正是为此目的而提供的解决方案，并且由于您具有jquery标记，因此可以考虑使用它。您可以尝试使用此SO post进行简单的实现

Answer 2

这就是我做的：

<div id="steps-uid-1-p-1">
  <input type="text" class="one_d_fields" name="fname" required/>
  <input type="text" class="one_d_fields" name="lname" required/>
  ...
  </div>
    <input type="button" name="previous"
    class="previous action-button-previous " value="Previous" /> 
   <input type="button" name="next" class="next action-button next_btn" value="Next" />
</div>

我的脚本如下：

$(".one_d_fields").on("keyup change", function () {
        var isValid = true;
        $($(this).closest("#steps-uid-1-p-1").find("input[type=text],select")).each(function () {
            if ($.trim($(this).val()) == '') {
                isValid = false;
            }
        });
        if (isValid == false) {
            $(".next_btn").attr("disabled",true);
             //or
            $(".next_btn").prop("disabled",true);

        } else {
            $(".next_btn").attr("disabled",false);
             //or
            $(".next_btn").prop("disabled",false);
        }
    });

Answer 3

添加一个布尔值“ isOkay”以测试条件并停用按钮，而无需使用jQuery：

function validateForm() {
  // New boolean var
  var isOkay = true;

  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
           // Condition :false
           isOkay = false;
        }
    }
    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 ");
            isOkay = false;
        }
    } 

    // Enable/Disable button
    if(isOkay){
      // disable
      document.getElementsByName("next")[0].disabled = true; 
    }else{
       // enable
       document.getElementsByName("next")[0].disabled = false;  
    }  
}

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

3 个答案: