Почему HTML5 тип ввода электронной почты не позволяет пустое место? - PullRequest
Новая
       92

Почему HTML5 тип ввода электронной почты не позволяет пустое место?

1 голос
/ 30 января 2020

Я использую input type=email в моем приложении. До этого у разработчиков старой системы пользователь input type=text. Недавно меня попросили исправить «проблему» в моем коде. Пользователь сообщил о проблеме при вводе адреса электронной почты в поле ввода, в конце было введено случайно пустое место. Затем пользователь попытался Save формы, и сообщение об ошибке отображалось в поле электронной почты This field is mistyped. Мне интересно, если это так type=email должен работать и предотвращать пустое пространство в полях адреса электронной почты?

Я проверил эту проблему в Chrome и пустое пространство не будет обнаружено, но в Firefox будет и сообщение об ошибке появится. 

$("#save").on("click", function() {
  console.log(verifyFields('my-form'));
  if (verifyFields('my-form')) {
    alert('Saved!');
  }
});

function verifyFields(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']) {
        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;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="my-form" id="my-form">
  <input type="email" name="user-email" id="user-email" required>
  <button type="button" id="save">Save</button>
</form>

1 Ответ

3 голосов
/ 30 января 2020

пробел не является допустимым символом для input type="email", потому что у нас не может быть адресов электронной почты с пробелами в них (A).

Так что в этом случае у вас есть неудачный сценарий, когда пробел находится не в середине адреса электронной почты, а в начале или в конце. Но если вы посмотрите на проверку , которую использует браузер для этого типа ввода , она все равно не будет разрешена.

У вас есть два варианта:

  1. Установите для него значение input type="text", но установите тот же шаблон проверки, который применяется к электронным письмам: <input type="text" pattern="/^[a-zA-Z0-9.!#$%&'*+\/=?^_{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$" />, а затем измените это регулярное выражение чтобы разрешить конечные пробелы (хотя вам нужно проверить на бэкэнде, чтобы убедиться, что он их разрешит, или иначе вам нужно сделать .trim(), чтобы удалить эти окружающие пробелы.

  2. Сделайте .trim() на своем входе после того, как пользователь выйдет из ввода, удалив пробелы в начале или конце.

(A) Согласно этому ответу :

пробел и символы "(),:; <> @ [] допускаются с ограничениями (они разрешены только внутри строки в кавычках ...

...