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

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

如果你添加它，它将在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);
});

Answer 2

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

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

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

2 个答案: