如何强行保持元素状态不变

Question

我有一个表现正常的表单，输入通过简单的验证来验证。我们安装了一个插件，它提供了一些深入的验证。

当插件在它正在监视的元素上验证失败时禁用提交按钮时，就会出现问题。

如何在不对插件文件进行任何修改的情况下始终保持提交处于活动状态。但是，我将控制页面本身，因此我可以更改任何内容。

我创建的一个简单的 JSFiddle 来说明情况： JSFiddle

HTML

<form action="#" id="form">
  Name: <input type="text" id="name" class="form-field">
  <span class='error-message'>Name is required</span><br>
  Age: <input type="text" id="age" class="form-field">
  <span class='error-message'>Age is required</span><br>
  Password: <input type="password" id="pass" class="adv-form-field">
  <span class='error-message'>Advanced messages</span>

  <button id="submit">Submit</button>

</form>

CSS

.error-message{
  display: none;
}

JavaScript (jQuery)

// Simple validation to check if the fields have values
$(".form-field").on("blur", function(){
        if(this.value == ""){
        $(this).next(".error-message").css("display", "block");
    } else {
         $(this).next(".error-message").css("display", "none");
    }
});


// Suppose this is the advanced function | we will have no control over this
$("#submit").prop("disabled", true);
$(".adv-form-field").on("blur", function(){
        if(this.value == ""){
        $(this).next(".error-message").css("display", "block");
      $("#submit").prop("disabled", true);
    } else {
         $(this).next(".error-message").css("display", "none");
       $("#submit").prop("disabled", false);
    }
});

Answer 1

我不知道你使用的是哪个插件，但根据我以前使用表单验证插件的经验，而不是输入 <button id="submit">Submit</button> 使用：

<input type="submit" id="submit">

Answer 2

您可以在插件初始化后添加自己的事件处理程序，这些将有效地覆盖（而不是实际覆盖）插件事件处理程序...

如果您添加它，它将运行在 document.ready...

$(function() {

    // set submit button enabled after input field blur
    $(".adv-form-field").on("blur", function() {
        $("#submit").prop("disabled", false);
    });

    // set initial state of submit button
    $("#submit").prop("disabled", false);
});

如何强行保持元素状态不变

How to keep an element state unchanged forcefully

javascript

validation

jquery

disabled-input