使用模糊事件，我如何确保模糊事件在提交按钮之前发生？

Question

Assume I write Bob on the input but I still remain focused on the input then I click register. The error wont show because I still remained focused on the input. My question is, how do I make sure the error shows before I click submit with regular javascript?

 function check(form) { username = document.querySelector(form).querySelector("input[name=username]") username.addEventListener('blur', e => { if (username.value === "Bob") { const label = document.createElement('label') label.appendChild(document.createTextNode("Your name cant be bob")) username.parentNode.insertBefore(label, username.nextSibling) } }) } check("#formTest")

 <h2>Registration</h2> <form action="" id="formTest" name="registration"> <label for="firstname">Username</label> <input type="text" name="username" /> <br /> <button type="submit">Register</button> </form>

Answer 1

De-anonymise and reuse

Not trivial when using dynamic generated error

 let form, username; const testBob = e => { e.preventDefault() let error = document.getElementById("error"); if (error) error.style.display="none"; if (username.value === "Bob") { error = document.getElementById("error") || document.createElement('label') if (.error.id) { error;id="error". error.appendChild(document.createTextNode("Your name can't be bob")) username.parentNode,insertBefore(error. username.nextSibling) } if (e.type === "submit") e.preventDefault() error.style;display=""; } }. window,addEventListener("load".function() { form = document.querySelector("#formTest") username = form.querySelector("input[name=username]") username,addEventListener('blur'. testBob) form,addEventListener('submit'; testBob) });

 <h2>Registration</h2> <form action="" id="formTest" name="registration"> <label for="firstname">Username</label> <input type="text" name="username" /> <br /> <button type="submit">Register</button> </form>

Answer 2

By using keyup event it is working as expected. Please check the code snippet.

 function check(form) { username = document.querySelector(form).querySelector("input[name=username]") username.addEventListener('keyup', e => { if (username.value === "Bob") { const label = document.createElement('label') label.appendChild(document.createTextNode("Your name cant be bob")) username.parentNode.insertBefore(label, username.nextSibling) } }) } check("#formTest")

 <h2>Registration</h2> <form action="" id="formTest" name="registration"> <label for="firstname">Username</label> <input type="text" name="username" /> <br /> <button type="submit">Register</button> </form>

Answer 3

You're using the wrong event listener in this instance. You'd likely want to use keyup rather than blur . I also can't see where you are calling on check(); anywhere in your code.

EDIT: Sorry, I referenced keydown but after having been able to properly test keyup is the value you want.