代码之家 › 专栏 › 技术社区 › Yagami Light

使用jquery禁用和启用按钮按窗体验证

jquery javascript

Yagami Light · 技术社区 · 6 年前

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>

是否可以将其用作禁用功能?!?

3 回复 | 直到 6 年前

Iceman 6 年前

有很多方法。

1) 基本上一个简单的策略是:

禁用“下一步”按钮开始
change function

PS:如果没有加载jquery,那么可以使用vanillajs来捕获事件。你真的不需要jQuery。

2) jQuery Validation Plugin

它是一个解决这个问题的方法,因为你有jQuery标签,你可以考虑这个选项。你可以试试这个 SO post 对于一个简单的实现

Rahul Pawar 6 年前

我就是这样做的:

<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);
        }
    });

Jérôme Teisseire 6 年前

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;  
    }  
}