HTML5: Пользовательское сообщение проверки с проверкой шаблона

Question

Я хочу, чтобы мой HTML формы, чтобы показать сообщение об ошибке, когда электронный адрес не находится в правильном формате

<form> 
    <input type="text" pattern="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" name="email" oninvalid="this.setCustomValidity('custom message')" oninput="setCustomValidity('')" /> 
    <input type="submit" value="Send"/> 
</form> 

JSFiddle example

Когда я вхожу по электронной почте в неправильный формат и нажмите кнопку «отправить», ожидаемое сообщение показано:

Однако, когда я начинаю печатать опять же, отображается следующее сообщение браузера по умолчанию (мой браузер настроен на голландский язык):

Есть в любом случае, чтобы предотвратить сообщение по умолчанию показывать? Можно ли отключить проверку при наборе текста?

Answer 1

Вы можете сделать this..Assuming вашего текстового поля идентификатора "text1" ..

$("#text1").change(function(e) { 
     e.preventDefault(); 
    }); 

или

$("#text1").keydown(function(e) { 
     e.preventDefault(); 
    }); 

Любые из выше можно использовать, но в вашей ситуации я предпочитаю KeyDown события. ..