Как переопределить пользовательское сообщение об ошибке для пользовательской действительности? - PullRequest
Новая
       20

Как переопределить пользовательское сообщение об ошибке для пользовательской действительности?

0 голосов
/ 29 января 2020

У меня есть поле электронной почты, которое должно проверять домен электронной почты каждый раз, когда пользователь изменяет значение. Мой код не работает, как ожидалось. Поле ввода будет активировано на blur, copy и paste. После этого введенное значение будет проверено, и сообщение будет установлено в поле атрибута данных. Вот пример моего кода: 

var COMMON_FUNC = {};
COMMON_FUNC.verifyFields = function(containerID, includeInvisible) {
  includeInvisible = includeInvisible || false;
  let isValid = true;
  const hdlMap = {
    //'valueMissing': "This field is required",
    //'patternMismatch': "This field is invalid",
    'tooLong': "This field is too long",
    'rangeOverflow': "This field is greater than allowed maximum",
    'rangeUnderflow': "This field is less than allowed minimum",
    'typeMismatch': "This field is mistyped"
  };

  const arrV = Object.keys(hdlMap);
  const invalidInputs = [];

  $("#" + containerID).find("input,textarea,select").each(function() {
    var curItem$ = $(this);
    var errMsg = [];
    var dispfld = curItem$.data("dispfld");
    var label = curItem$.data("label");

    if (includeInvisible || curItem$.is(":visible")) {
      if (curItem$[0].validity.valid) {
        curItem$.removeClass("is-invalid");
        return;
      }

      if (curItem$[0].validity['valueMissing'] && label) {
        var reqMsg = label ? label + " field is required" : "This field is required";
        errMsg.push(reqMsg);
      }

      if (curItem$[0].validity['customError'] && dispfld) {
        errMsg.push(dispfld);
      }

      if (curItem$[0].validity['patternMismatch'] && dispfld) {
        errMsg.push(dispfld);
      }

      arrV.forEach(function(prop) {
        if (curItem$[0].validity[prop]) {
          errMsg.push(hdlMap[prop]);
        }
      });

      if (errMsg.length) {
        if (!curItem$.next().is(".invalid-feedback")) {
          curItem$.after('<div class="invalid-feedback"></div>');
        }
        curItem$.addClass("is-invalid").next().text(errMsg.join(' and '));
        invalidInputs.push(curItem$);
        isValid = false;
      } else {
        curItem$.removeClass("is-invalid");
      }
    }
  });

  if (invalidInputs.length) {
    invalidInputs[0].focus();
  }

  return isValid;
};

$(".save").on("click", function() {
  if (COMMON_FUNC.verifyFields("my-form")) {
    alert("Record has been saved!");
  }
});

$(".email").on("blur copy paste", function() {
  var fldElement = $(this);
  var objData = {
    'email': fldElement.val(),
    'type': fldElement.data('type')
  };
  var validEmails = ["test@gmail.com", "test@yahoo.com", "test@home.org"];
  var resultArr = [];

  if (fldElement.val()) {
    if (!validEmails.includes(fldElement.val())) {
      resultArr.push('This email ' + fldElement.val() + ' is invalid');
    }
    console.log(resultArr);
    if (resultArr.length) {
      if (!fldElement.next().is(".invalid-feedback")) {
        fldElement.after('<div class="invalid-feedback"></div>');
      }

      fldElement.attr("data-dispfld", resultArr.join(' and '));
      fldElement[0].setCustomValidity(resultArr.join(' and '));
    } else {
      fldElement.removeClass("is-invalid");
    }
  }
});
<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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<html>

<head>
  <title>Validate Email</title>
</head>

<body>
  <form name="my-form" id="my-form">
    <div class="form-group">
      <label for="email">Agency Manager Email:</label>
      <input class="form-control email" type="email" name="email" id="email" value="" data-type="Manager Email" maxlength="40" data-label="Manager Email" required="">
    </div>
    <button type="button" class="btn btn-secondary save">Save</button>
  </form>
</body>

</html>

Если вы запустите приведенный выше пример кода и введете случайное электронное письмо, например ryan@homes.com и нажмете Save, вы увидите сообщение о том, что электронное письмо недействительно. Если после этого вы введете другой недействительный адрес электронной почты, в сообщении будет отображаться все еще предыдущее сообщение. Я не уверен, почему, так как массив, который содержит сообщения об ошибках, обновляется. Это должно быть связано с методом setCustomValidity(). Если кто-нибудь знает, как решить эту проблему, пожалуйста, дайте мне знать. Спасибо.

...