How to change default "please include an @ in the email address"?

Question

I've been able to change the error message when the user has not typed their email in yet, but how do I change the error message when the user types in their email with the wrong format?

This is my code written in Bootstrap 4 style:

<div class="form-group">
    <label>Email</label>
    <input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">
</div>

Answer 1

You simply can fix this with adding title to input tag

<input type="email" class="form-control" name="email" id="freeform_email"
                        placeholder="Enter an email" required="required"
                        oninvalid="this.setCustomValidity('Enter an email that contains &quot@&quot. Example: [email protected]')" title="Email: the email contains '@'. Example: [email protected]" />
                    

Yours should be then:

<div class="form-group">
    <label>Email</label>
    <input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')"  oninput="this.setCustomValidity('')" title='<your text>'">
</div>

You're welcome.