Fjern browserens pop-up ved at forhindre standardopførslen, når formen er ugyldig.
<form aria-label="Sign up form">
<div class="form-group">
<label for="first_name">First name</label>
<input aria-describedby="first_name-error" type="text" id="first_name" name="first_name" required />
<p class="error-message" id="first_name-error">Please enter a value</p>
</div>
<div class="form-group">
<label for="last_name">Last name</label>
<input aria-describedby="last_name-error" type="text" id="last_name" name="last_name" required />
<p class="error-message" id="last_name-error">Please enter a value</p>
</div>
<div class="form-group">
<label for="email">Email</label>
<input aria-describedby="email-error" type="email" id="email" name="email" required />
<p class="error-message" id="email-error">Please enter a value</p>
</div>
<div class="form-group">
<label for="password">Password</label>
<p id="password-instruction">Password must be at least 8 characters</p>
<input aria-describedby="password-instruction password-error" type="password" id="password" name="password" minlength="8" required />
<p class="error-message" id="password-error">Please enter a value</p>
</div>
<div class="form-group">
<label for="terms">
<input aria-describedby="accept_terms-error" type="checkbox" id="terms" name="accept_terms" value="yes" required />
Accept terms
</label>
<p class="error-message" id="accept_terms-error">Please tick the box</p>
</div>
<button>Sign up</button>
</form>
const form = document.querySelector('form');
function cancelPopup(event) {
// 1. forhindr standardopførslen
form.querySelector(":user-invalid").focus();
}
form.addEventListener('invalid', cancelPopup, true);
Hints
function cancelPopup(event) {
event.preventDefault();
form.querySelector(":user-invalid").focus();
}