javascript - validity.rangeUnderflow不起作用

我正在制作一个小型文本Web应用程序，您可以在其中向其他联系人发送消息。

如果您发送邮件，我希望它至少包含3个字符。

我现在遇到的问题是，如果我填写1个或2个字符，我将不会收到“太短”错误消息。我做错了事，但我真的不知道该怎么办。

const handeSubmitForm = e => {
      const $form  = e.target;
      if(!$form.checkValidity()){
        e.preventDefault();
        $form.querySelector(`.error`).textContent = `Fill in the correct fields`;
        Array.from($form.elements).forEach(showValidationInfo);
      }
    };

    const handleInputField = e => {
      const $field = e.currentTarget;
      if($field.checkValidity()){
        $field.parentElement.querySelector(`.error`).textContent = ``;
      }
    };

    const showValidationInfo = $field => {
      let message;

      if($field.validity.valueMissing ){
        message = `Required`;
      }

      if($field.validity.rangeUnderflow){
        message = `Too short`;
      }

      if(message){
        $field.parentElement.querySelector(`.error`).textContent = message;
      }
    };

    const handleBlurField = e => {
      const $field = e.currentTarget;
      showValidationInfo($field);
    };

    const addValidationListeners = fields => {
      fields.forEach($field => {
        $field.addEventListener(`blur`, handleBlurField);
        $field.addEventListener(`input`, handleInputField);
      });
    };

  const init = () => {

    const $form = document.querySelector(`.message-form`);
    $form.noValidate = true;
    $form.addEventListener(`submit`, handeSubmitForm );
    addValidationListeners(Array.from($form.elements));

  };
  init();

<form class="message-form">
 <span class="error"></span>
  <div class="wrap">
   <span class="error"></span>
   <input type="text" class="message-input" required minlength="3"
   placeholder="Write your message..." />
  <button type="submit" class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
  </div>
</form>

最佳答案

验证validity.rangeUnderflow比较值而不是其长度。使用validation.tooShort。

const handeSubmitForm = e => {
      const $form  = e.target;
      if(!$form.checkValidity()){
        e.preventDefault();
        $form.querySelector(`.error`).textContent = `Fill in the correct fields`;
        Array.from($form.elements).forEach(showValidationInfo);
      }
    };

    const handleInputField = e => {
      const $field = e.currentTarget;
      if($field.checkValidity()){
        $field.parentElement.querySelector(`.error`).textContent = ``;
      }
    };

    const showValidationInfo = $field => {
      let message;

      if($field.validity.valueMissing ){
        message = `Required`;
      }

      if($field.validity.tooShort){
        message = `Too short`;
      }

      if(message){
        $field.parentElement.querySelector(`.error`).textContent = message;
      }
    };

    const handleBlurField = e => {
      const $field = e.currentTarget;
      showValidationInfo($field);
    };

    const addValidationListeners = fields => {
      fields.forEach($field => {
        $field.addEventListener(`blur`, handleBlurField);
        $field.addEventListener(`input`, handleInputField);
      });
    };

  const init = () => {

    const $form = document.querySelector(`.message-form`);
    $form.noValidate = true;
    $form.addEventListener(`submit`, handeSubmitForm );
    addValidationListeners(Array.from($form.elements));

  };
  init();

<form class="message-form">
 <span class="error"></span>
  <div class="wrap">
   <span class="error"></span>
   <input type="text" class="message-input" required minlength="3"
   placeholder="Write your message..." />
  <button type="submit" class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i>Submit</button>
  </div>
</form>

关于javascript - validity.rangeUnderflow不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50854958/