Question

我有一个表格，其中输入字段之一不应包含在标准引导程序验证中。这是工作示例：

var usersData = {
  56780: {
    first_name: "John",
    last_name: "Wick"
  },
  37: {
    first_name: "Mike",
    last_name: "Witt"
  },
  780: {
    first_name: "Jamie",
    last_name: "Johnson"
  },
  316: {
    first_name: "Nick",
    last_name: "Rashford"
  },
  457890: {
    first_name: "George",
    last_name: "Terry"
  }
};

$('#user_id').on('change', getUser);

function getUser(e) {
  var inputFld = $(this),
    msgFld = inputFld.closest('div').find('.invalid-feedback'),
    inputVal = inputFld.val(),
    regex = /^([0-9]{1,8})$/;

  if (inputVal) {
    if (regex.test(inputVal) === false) {
      inputFld.addClass('is-invalid');
      msgFld.text('User ID has to be numeric 1-8 digits long.');
    } else {
      // Here I have Ajax request but for testing purpuse we use JS object.
      var data = usersData[inputVal];
      userResponse(data, inputFld, msgFld)
    }
  } else {
    inputFld.hasClass('is-invalid') ? inputFld.removeClass('is-invalid') : '';
    inputFld.hasClass('is-valid') ? inputFld.removeClass('is-valid') : '';
    $('#first-name').text('N/A');
    $('#last-name').text('N/A');
  }
}

function userResponse(data, inputFld, msgFld) {
  if ($.isEmptyObject(data)) {
    inputFld.hasClass('is-valid') ? inputFld.removeClass('is-valid') : '';
    inputFld.addClass('is-invalid').val('');
    msgFld.text('No records found.');
    $('#first-name').text('N/A');
    $('#last-name').text('N/A');
  } else {
    inputFld.hasClass('is-invalid') ? inputFld.removeClass('is-invalid') : '';
    inputFld.addClass('is-valid');
    $('#first-name').text(data.first_name);
    $('#last-name').text(data.last_name);
  }
}

$('.needs-validation').on('submit', saveFrm);

function saveFrm(event) {
  event.preventDefault();
  $(this).addClass('was-validated');

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

<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
  <form name="user-data" id="user-data" class="needs-validation" novalidate>
    <div class="form-group required">
      <label for="position">Position Name:</label>
      <input class="form-control" type="text" name="position" id="position" value="" maxlength="120" placeholder="Enter Position Name" required>
      <div class="invalid-feedback">Position Name</div>
    </div>
    <div class="form-row">
      <div class="form-group col-4">
        <label class="control-label" for="user_id">User ID:</label>
        <input class="form-control" type="text" name="user_id" id="user_id" value="" maxlength="8" placeholder="Enter User ID">
        <div class="invalid-feedback"></div>
      </div>
      <div class="col-4">
        <p>Last Name:</p>
        <p id="last-name">N/A</p>
      </div>
      <div class="col-4">
        <p>First Name:</p>
        <p id="first-name">N/A</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 text-center">
        <input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
      </div>
    </div>
  </form>
</div>

如果您运行该代码段，则可以测试我的代码。到目前为止，当我输入用户ID时，逻辑工作正常。如果找到匹配项，则姓和名字段将使用JS对象中的值填充。如果不是，则应清除该字段并显示消息。我发现的问题是下一个：

用户输入用户ID的值，然后说该ID存在。名字和姓氏将被填充，并且“用户ID”字段变为绿色。
然后让我们尝试提交表单。在这种情况下，会启动Bootstrap / HTML5验证。所有必需/无效值将在表格中检测到。在这种情况下，无论我输入什么用户标识，用户标识字段都会变为绿色并保持绿色。
在这种情况下，在表单提交中，用户ID不应包含在表单验证中。

是否可以从提交验证中排除USER ID字段？或者，如果您对如何处理这种情况还有其他建议？

谢谢。

如何防止使用Bootstrap 4验证输入字段？

0 个答案: