I want to stop the form from submitting when the username is below 3 characters. I tried using return false but it didn't work. Below is the code (didn't used return false in this one) I am a beginner so please give an easy explanation ๐
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
};
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
};
document.addEventListener('DOMContentLoaded', () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
setFormMessage(loginForm, "error", "Invalid Username/Password Combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if(e.target.id === "signupUsername" && e.target.value.length < 3 ) {
setInputError(inputElement, "Username must be atleast 3 letters in length");
}
});
inputElement.addEventListener("input", e => {
clearInputError(inputElement);
});
});
});```
For me this always works:
function check_form(form) {
var ok = confirm("is it ok?");
return ok
}<form onsubmit="return check_form(this)">
<input>
<input type="submit">
</form>Bonus: if you want to asynchronously check the form and only then submit, it goes like this:
function check_form(form) {
setTimeout(function() {
var ok = confirm("is it ok?")
if (ok) {
form.submit()
}
}, 100);
}<form onsubmit="check_form(this); return false;">
<input>
<input type="submit">
</form>