Подтверждение ввода ошибки HTML5 при установке в javascript (показывает предупреждение) или проверка проверки до

Я пытаюсь проверить данные для ввода во вход. Я хочу использовать de Проверка HTML5.Подтверждение ввода ошибки HTML5 при установке в javascript (показывает предупреждение) или проверка проверки до

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

Указанное значение «АААА» не является допустимым числом. Значение должно соответствовать следующему регулярному выражению: -? (\ 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

See DEMO.

больше объясненных:

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

ОБНОВЛЕНО:

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

источник

2016-05-20 Pedro Gámez

По сути вы хотите проверить на ценностной отказ, а не ошибка? (Я не уверен, что будет событие, связанное с этим, но я просто хотел уточнить для своего собственного понимания.) –

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

var value = "aaaa"; 
document.getElementById("input").value = value; 
if (document.getElementById("input").value == null || document.getElementById("input").value == "") { 
     alert("Invalid value"); 
}

источник

2016-05-23 07:07:47 fhollste

Простой, но правильный. Если кто-нибудь знает, как получить ошибку предупреждения, чтобы показать моего пользователя, я отмечу этот ответ. –

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

@Holle ok это правильно, но пример с checkValidity не ??? Для проверки HTML5 ??? –

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

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

Что вы можете сделать, это проверить 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 как пример

источник

2016-05-20 11:48:07 michaPau

Это не ответ. Номер типа ввода - пример, мне нужно проверить любой тип ввода. Если ввод - это дата, проблема будет такой же. Мне нужно использовать проверку HTML5. –

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

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

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>

источник

2016-05-23 20:53:51

Это не ответ на мой вопрос. –

@Pedro Gamez, на котором вы написали, вы не будете использовать проверку HTML5, а затем просто используйте атрибут «обязательный» для нулевого или пустого поля. Я думаю, вы совершенно ошибаетесь, и этот ответ не должен быть проголосован. –

@Pedro Gamez вы проголосовали за совершенно правильный ответ. –

Для проверки .value быть установлен javascript, вы можете throwError, имеющий .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

источник

2016-05-24 07:19:48 guest271314

Подтверждение ввода ошибки HTML5 при установке в javascript (показывает предупреждение) или проверка проверки до

ответ

Смежные вопросы