Захватить проверку правильности ввода HTML5 при установке в javascript (показывает предупреждение) или проверить проверку перед

Я пытаюсь проверить данные, чтобы установить на входе. Я хочу использовать де Validation HTML5.

Например, я хочу проверить, является ли "aaaa" действительными данными для ввода числа. Я хотел использовать willValidate или же validity но я не могу установить недопустимое значение, консоль показывает (Chrome):

Указанное значение "aaaa" не является допустимым числом. Значение должно соответствовать следующему регулярному выражению: -?(\ D +|\d+.\ D +|.\ D +)([eE][-+]?\ D +)?

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

var value = "aaaa";

try {
    document.getElementById("input").value = value; // Shows a warn
} catch(err) {
    console.log(err.message); // Nothing catching
}

console.log( document.getElementById("input").value ); // It is empty

Смотрите ДЕМО.

БОЛЬШЕ ОБЪЯСНЕНО:

Я хочу проверить, допустимо ли значение для установленного в типе ввода. Я думал установить недопустимое значение на входе и проверить willValidate или правильность, но браузер показывает предупреждение, а входное значение пусто. Проблема в том, что мой веб-интерфейс устанавливает входные значения через javascript, но пользователь передает значения. При возникновении ошибки мне нужно показать ошибку пользователю, а не только поставить и ввести пустой..

ОБНОВЛЕНО:

Я знаю, что предупреждение не является исключением. Я хочу знать, показывает ошибку при установке неверного значения ввода в любом типе.

Источник

4 ответа

Решение
var value = "aaaa";
document.getElementById("input").value = value;
if (document.getElementById("input").value == null || document.getElementById("input").value == "") {
        alert("Invalid value");
}
Источник

Проверять .value устанавливается javascript, вы можете throw Error, имея .message установить на предупреждение отображается в console, чтобы catch если input.value не совпадает RegExp отображается в console,

Для проверки ввода пользователя можно использовать yupu onkeydown, onpaste События; использование <label> элемент для отображения сообщения на html, onfocus событие для установки label.innerHTML пустая строка, если input.value пустая строка

Обратите внимание, сообщение отображается на console также установлен на input элемент computedName имущество; хотя не обновляется при вводе пользователем и устанавливается пустой строкой после alert() в catch,

<!DOCTYPE html>
<html>
<head>
  <script>
    window.onload = function() {
      
      var input = document.getElementById("input");
      var label = document.querySelector("[for=input]");

      function handleInvalid(el, val, e) {
        console.log("value:", val, "computedName:", el.comptedName);
        var message = "The specified value <mark>" + val 
                      + "</mark> is not a valid number. "
                      + "The value must match to "
                      + "the following regular expression: "
                      + "<code style=background:#eee;padding:2px>"                          
                      + "-?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?</code>";
        // if `e` : `event` is not defined,
        // that is `val` : `"aaaa"` set at `try`;
        // not user input
        if (!e) {
          el.value = val;
          
        };

        if (!/-?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?/.test(val)) {
          if (!e) {
            // `throw` `Error` to `catch`
            throw new Error(message);
          } else {
            label.innerHTML = message;
          }
        } else {
          // if `val` is matches `RegExp`, 
          // set `label` `.innerHTML` to empty string            
          label.innerHTML = ""
        }
      }

      function handleInput(e) { 
        label.innerHTML = "";
        var text = e.clipboardData // handle `paste` event
                   ? e.clipboardData.getData("text/plain") 
                     // use `event.key` of `keydown` event
                     // if defined, else use `e.keyCode`
                   : e.key || String.fromCodePoint(e.keyCode);
        handleInvalid(this, text, e);
      }
      
      function reset() {
        // set `label` `.innerHTML` to empty string
        if (input.value.trim() === "") {
          label.innerHTML = "";
        }
      }

      input.onkeydown = input.onpaste = handleInput;
      input.onfocus = reset;

      try {
        var val = "aaaa";
        handleInvalid(input, val)
      } catch (e) {
        label.innerHTML = e.message;
        alert(input.computedName);
      }
      
    }
  </script>
  <style>
  </style>
</head>
<body>
  <form>
    <input type="number" id="input" />
    <label id="error" for="input"></label>
  </form>
</body>
</html>

plnkr http://plnkr.co/edit/mLgCQfBmvZHb5cNGZWtN?p=preview

Источник 

    function chkValidity(elemementID) {
        var inpObj = document.getElementById(elemementID);
        if (inpObj.checkValidity() == false) {
            inpObj.setCustomValidity("This is not a number or a valid number. And this is my custom validity message for the value "+inpObj.value+" which is being inserted via javascript. Determinig \"required\",\"min\",\"max\" and checkValidity it is enough to do the work.");
          document.getElementById("error").innerHTML = inpObj.validationMessage;
          alert(inpObj.validationMessage);
        } else {
        document.getElementById("error").innerHTML = "This is valid number and within range";
        }
    }
    var value = "aaaa";
    document.getElementById("input").value = value;
    chkValidity("input");
    document.querySelector("#clickme").addEventListener("click", function(){
        chkValidity("input");
    });
    <input type="number" id="input" required min="0" max="9999" step="1" />
    <button id="clickme"> Click Me
    </button>
    <div id="error">
    </div>

Источник

Потому что это не ошибка, а только предупреждение. Вы можете проверить это в консоли.

(Изменить: Вы упомянули это сами в вопросе)

Что вы можете сделать, это проверить isNaN(value)и выбросить объект Error.

try {
 if(isNaN(value)) 
    throw new Error("not a number");
 else
    document.getElementById("input").value = value;
} catch(err) {
    document.getElementById("error").innerText = err.message;
}

jsFiddle как пример

Источник
Другие вопросы по тегам