Существует несколько сценариев, в которых вам нужно будет вызвать функцию, когда поле ввода становится неактивным. Возможно, вы хотите вызвать api или проверить поле формы, как только поле ввода теряет фокус.
onblur
Функция onblur срабатывает в тот момент, когда поле ввода теряет фокус. Это событие не отменяется и не вызывает пузырьков.
Противоположностью onblur является onfocus.
Приведем код, чтобы лучше понять это
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validation of field on focs out</title>
</head>
<body>
<form method="post" >
<input type="text" placeholder="Email" id='email'>
<span id='email-error'></span>
<input type="password" placeholder="Password" id='password' >
<span id='password-error'></span>
</form>
</body>
<script>
const email =document.getElementById("email")
const pasword =document.getElementById("password")
pasword.addEventListener('blur',()=>{
const error= document.getElementById('password-error')
if(pasword.value?.length < 8){
error.innerHTML = "password must be 8 or more characters"
returnb
}
error.innerHTML = ""
})
email.addEventListener('blur',()=>{
const emailRegex = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
const error= document.getElementById('email-error')
if(email.value.match(emailRegex)) {
error.innerHTML = ""
return
}
error.innerHTML = "invalid email"
})
</script>
</html>
Объяснение кода
Мы проверяем оба поля — поле пароля и поле электронной почты, когда они установлены в неактивное состояние.
В теге script мы прикрепили событие blur к обоим полям, что означает, что как только поле выйдет из фокуса, сработает второй параметр addEventListner, который является функцией.
Валидация электронной почты
Мы используем regex для проверки поля email. Мы проверяем, удовлетворяет ли значение поля email regex, если удовлетворяет, то мы удалим ошибку из области ошибок, а если regex не удовлетворяет, то мы выведем ошибку, говорящую о недопустимом email.
Проверка пароля
Для проверки пароля мы проверяем, что длина пароля больше или равна 8, если да, то мы удалим область ошибок пароля, а если нет, то выведем ошибку, говорящую, что пароль должен состоять из 8 или более символов.
Заключение
В своей карьере разработчика вы столкнетесь со многими сценариями, когда вам придется проверять поле или вызывать функцию, когда поле установлено в неактивное состояние. Я постарался дать вам некоторое базовое понимание того, как этого можно добиться.
Если у вас есть какие-либо вопросы или предложения, оставляйте их в комментариях.
Спасибо