时间戳

首页 > 解决方案 > 如何在验证输入字段值之前禁用保存按钮？

javascript - 如何在验证输入字段值之前禁用保存按钮？

问题描述

我在系统中有一个表单，该表单有一个在用户提交表单之前应该验证的字段。表单上的第一个字段是“类型”输入字段，第二个是“用户 ID”输入字段。这是我当前代码的工作示例：

var data = {
  93169: "John Rives",
  33442: "Mike Cook",
  70354: "Tammy Bull",
  22078: "Nick Adams"
};

$("#user_id").on("keyup", function() {
  var inputFld = $(this),
    msgFld = $(this).closest("div").find(".invalid-feedback");

  if (!inputFld.val().length) {
    inputFld.removeClass("is-invalid").val("");
    msgFld.text("");
    $("#save").prop("disabled", false);
  }
});

$("#user_type").on("change", function() {
  var inputVal = $(this).val();

  if (inputVal) {
    $("#user_id").prop("disabled", false);
  } else {
    $("#user_id").prop("disabled", true);
  }

  // Every time on change reset affiliate field and remove the calss.
  $("#user_id").removeClass("is-invalid").val("");
  $("#user_name").text("N/A");
  $("#save").prop("disabled", false);
});

$("#search_user").on("click", function() {
  var inputFld = $(this).parent().parent().children("input"),
    msgFld = inputFld.closest("div").find(".invalid-feedback"),
    typeID = $("#user_type").val(),
    saveBtn = $("#save"),
    userID = inputFld.val(),
    regex = /^([0-9]{1,5})$/;

  if (userID) {
    if (regex.test(userID) === false) {
      saveBtn.prop("disabled", true);
      inputFld.addClass("is-invalid");
      msgFld.text("User ID has to be numeric 1-5 digits long.");
      $("#user_name").text("N/A");
    } else {
      var userName = data[userID];
      populateUser(userName, inputFld, msgFld, saveBtn);
    }
  } else {
    inputFld.removeClass('is-invalid');
    $('#user_name').text('N/A');
  }
});

function populateUser(userName, inputFld, msgFld, saveBtn) {
  if (!userName) {
    saveBtn.prop('disabled', true);
    inputFld.addClass('is-invalid');
    msgFld.text("User doesn't exist.");
    $("#user_name").text("N/A");
  } else {
    inputFld.removeClass("is-invalid");
    $("#user_name").text(userName);
  }
}
#search_user {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/a6e6aa2b6e.js"></script>

<div class="container">
  <form name="my_frm" id="my_frm" autocomplete="off">
    <div class="form-row">
      <div class="form-group col-4">
        <label>User Type:</label>
        <select class="custom-select browser-default" name="user_type" id="user_type" required>
          <option value="">--Select Type--</option>
          <option value="1">Director</option>
          <option value="2">Project Manager</option>
          <option value="3">Assistant Manager</option>
        </select>
      </div>
      <div class="form-group col-4">
        <label class="control-label" for="user_id">User ID:</label>
        <div class="input-group">
          <div class="input-group addon">
            <input class="form-control" type="text" name="user_id" id="user_id" maxlength="5" placeholder="Enter User ID" disabled>
            <div class="input-group-append">
              <button class="btn btn-secondary" type="button" name="search_user" id="search_user"><i class="fa fa-search"></i></button>
            </div>
            <div class="invalid-feedback"></div>
          </div>
        </div>
      </div>
      <div class="form-group col-4">
        <p>User Name:</p>
        <p id="user_name">N/A</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 text-center">
        <button class="btn btn-outline-secondary" type="button" name="save" id="save">Save</button>
      </div>
    </div>
  </form>
</div>

在上面的示例中，您将能够通过一些示例看到函数。我担心的一件事是如果用户输入用户 ID 并且没有点击搜索按钮怎么办？在这种情况下，用户仍然可以在验证用户 ID 之前提交表单。我想知道是否有办法阻止表单提交/禁用保存按钮，直到用户 ID 在字段中具有值并且该值未被验证。如果有人可以帮我解决这个问题，或者如果您有任何建议，请告诉我。如果您有更好的方法来实现此验证，我也很乐意听到。

标签： javascriptjqueryajax

解决方案

您可以将禁用的属性（或类）添加到保存按钮，然后在成功验证后将其删除。

在按钮的回调中，您将检查按钮是否被禁用

$("#save").click(function() {
  if ($(this).hasClass("disabled")) {
    console.log("wait for validation!")
    return;
  }
  //do stuff
});


$("#val").click(function() {
  $("#save").removeClass("disabled");
});
.disabled {
  opacity: .7;
  cursor: not-allowed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-outline-secondary disabled" type="button" name="save" id="save">Save</button>

<button class="btn btn-outline-secondary" type="button" name="val" id="val">Validate</button>

推荐阅读