<style>
.error {
background: red;
}
</style>
Your email please: <input type="email" id="input">
<input type="text" style="width:220px" placeholder="make email invalid and try to focus here">
<script>
input.onblur = function() {
if (!this.value.includes('@')) { // ليس بريدا الكترونيّا
// أظهر الخطأ
this.classList.add("error");
// وأرجع التركيز كما كان...
input.focus();
} else {
this.classList.remove("error");
}
};
</script>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.