表单提交验证后如何更改输入字段状态？

Question

我想知道是否有办法使用 JavaScript 手动设置输入字段的有效或无效状态？我有用作搜索字段的输入字段。一旦用户输入值，我将得到服务器的响应，我应该标记输入值是正确还是不正确。到目前为止，我能够做到这一点，直到用户点击提交。一旦用户点击提交，我就无法更改该字段的状态。它被标记为有效，但我仍然没有找到用 JavaScript 更改它的方法。

示例如下：

$('#save').on('click', saveFrm);

function saveFrm() {
  var form = $('#new-record');

  if (form[0].checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
    console.log('Invalid form data...');
  } else {
    console.log('Send Ajax Request');
  }

  form.addClass('was-validated');
}

$('#search_user').on('click', getUser);

function getUser() {
  var inputFld = $(this).parent().parent().children('input'),
    msgFld = inputFld.closest('div').find('.invalid-feedback'),
    saveBtn = inputFld.closest('form').find(':submit'),
    inputVal = inputFld.val(),
    regex = /^([0-9]{1,8})$/;
  
  if (inputVal) {
    if (regex.test(inputVal) === false) {
      saveBtn.prop('disabled', true);
      inputFld.addClass('is-invalid').val(''); // Apply
      msgFld.text('User ID has to be numeric 1-8 digits long.');
      setTimeout(function() {
        inputFld.removeClass('is-invalid').val('');
        msgFld.text('');
        saveBtn.prop('disabled', false);
      }, 5000);
    } else {
      console.log('Send Ajax Request...');
    }
  } else {
    inputFld.hasClass('is-invalid') ? inputFld.removeClass('is-invalid') : '';
    inputFld.addClass('is-valid');
  }

}

#search_user {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <form name="new-record" id="new-record" class="needs-validation" novalidate>

    <div class="form-group">
      <label for="name">Name:</label>
      <input class="form-control" type="text" name="name" id="name" value="" maxlength="120" placeholder="Enter the name." required>
      <div class="invalid-feedback">Please provide Name</div>
    </div>

    <div class="form-row">
      <div class="form-group col-6">
        <label>Type:</label>
        <select class="custom-select browser-default" name="type" id="type" required>
          <option value="">--Select Type--</option>
          <option value="1">Level 1</option>
          <option value="2">Level 2</option>
          <option value="3">Level 3</option>
        </select>
        <div class="invalid-feedback">Please provide Type</div>
      </div>

      <div class="form-group col-6">
        <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" value="" maxlength="8" placeholder="Enter User ID">
            <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>

    <div class="row">
      <div class="col-12 text-center">
        <input class="btn btn-primary" type="button" name="save" id="save" value="Save">
      </div>
    </div>
  </form>
</div>

在示例中，尝试单击“保存”按钮，然后在“用户 ID”字段中输入一些无效值。然后，如果您单击搜索按钮，该字段下方将显示消息，但输入字段周围仍出现绿色。我想知道是否有办法用 JavaScript/JQuery 解决这个问题？

Answer 1

您可以将 UserId 与 Ajax 请求一起发送以对其进行验证（如果它为 false，则返回 JSON 格式的消息以添加到需要修复的验证字段中）。

if (form[0].checkValidity() === false) {
  event.preventDefault();
  event.stopPropagation();
  console.log('Invalid form data...');
} else {
  // When you send the request, add in the UserId used so it can get validated.
  console.log('Send Ajax Request');
  // If the validation is false, then add in the validation error here and return false in the function to stop it.     
}