Как изменить статус поля ввода после проверки отправки формы?

Мне интересно, есть ли способ вручную установить действительный или недействительный статус поля ввода с помощью 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>

В примере попробуйте нажать кнопку «Сохранить», а затем ввести недопустимое значение в поле «Идентификатор пользователя». Затем, если вы нажмете кнопку поиска, под полем появится сообщение, но вокруг поля ввода по-прежнему будет отображаться зеленый цвет. Мне интересно, есть ли способ обойти эту проблему с помощью JavaScript/JQuery?


javascript validation jquery bootstrap-4 html5-validation
person espresso_coffee    schedule 26.07.2019    source источник
comment
Что вы можете сделать, так это добавить функцию внутри функции отправки для проверки всех полей перед ее отправкой. Если есть ошибка, верните false, и отправка остановится.   -  person Keith    schedule 26.07.2019
comment
@Keith Не могли бы вы привести пример? Я не уверен, что полностью понимаю ваш подход. Спасибо.   -  person espresso_coffee    schedule 26.07.2019
comment
Из имеющейся у вас разметки я воссоздал jsfiddle.net/mxqj6yup, но, похоже, он правильно проверяется перед отправкой. Нужно ли валидировать пользователя?   -  person Keith    schedule 26.07.2019
comment
Поле идентификатора пользователя @Keith не требуется. Если есть значение, которое должно быть правильным значением, которое заполняется из ответа ajax. Если нет, просто оставьте поле пустым. Надеюсь, это имеет смысл.   -  person espresso_coffee    schedule 26.07.2019
comment
Хорошо, тогда то, что у вас есть, работает onChange, что означает, что когда пользователь вводит что-то в поле имени, которое он проверяет, то же самое для раскрывающегося списка (и изменяет границы проверки). Итак, есть ли какая-то другая проверка, которую вам нужно выполнить перед отправкой? или есть что-то еще, что требует проверки на стороне сервера?   -  person Keith    schedule 26.07.2019
comment
@Keith Все остальные поля в форме, кроме идентификатора пользователя, должны быть проверены на стороне клиента. Идентификатор пользователя является исключением, поскольку это значение уже проверено с помощью ответа Ajax. Все, что я хочу, это запретить пользователю отправлять неверный идентификатор пользователя. Кроме того, они должны иметь возможность видеть, когда идентификатор пользователя недействителен. Если вы нажмете «Отправить/Сохранить форму», а затем попытаетесь ввести неверный идентификатор и нажмете «Поиск», идентификатор пользователя по-прежнему останется зеленым (действительным), что сбивает с толку. Имеет ли это смысл?   -  person espresso_coffee    schedule 26.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете отправить UserId с запросом Ajax для его проверки (в свою очередь, если он ложный, верните сообщение в формате 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.     
}
person Keith    schedule 26.07.2019