Custom Error Messages in HTML5 Required Form Fields

Question

I've made a form with required fields and custom error messages/validation, which all display/work correctly, however if the error is corrected, the form still cannot be submitted. This was working before I added the inline oninvalid checks. Not sure what I'm doing wrong.

Code:

<form role="form" method="post" action="contact-form.php">
    <input type="text" class="input-field" name="name" id="name" placeholder="Name" required oninvalid="this.setCustomValidity ('Please enter your name.')" />
    <input type="email" class="input-field" name="email" id="email" placeholder="Email" required />
    <textarea name="message" class="textarea-field" id="message" placeholder="Message" required oninvalid="this.setCustomValidity ('Please enter your message.')"></textarea>
    <input type="submit" value="Contact Me" class="btn btn-primary btn-xl" />             
</form>
<script>
    var email = document.querySelector( "#email" );
    function setErrorMessage() {
        if ( email.validity.valueMissing ) {
            email.setCustomValidity( "Please enter your email address." );
        } else if ( email.validity.typeMismatch ) {
            email.setCustomValidity( "Please enter a valid email address." );
        }
    };
    setErrorMessage();
    email.addEventListener( "change", setErrorMessage );
</script>

JSFiddle: http://jsfiddle.net/44Lrgmjc/

Any help would be greatly appreciated!

Thanks.

Thanks, but the custom messages are now appearing in pop-up windows all at once. The issue is still that the error messages aren't being cleared once the fields are filled. — Mario Parra
– Mario Parra, Commented Aug 13, 2015 at 1:38

Rachel Gallen · Accepted Answer · 2015-08-12 23:46:08Z

1

I adjusted your javascript and added (key) a validate email function. here is a fiddle

function validate{
function email(){
    if(form.email.value == "") {
      alert("Please enter your email");
      form.email.focus();
      return false;
    }

    // regular expression to match only alphanumeric characters and spaces
    var re = /^[\w ]+$/;

    // validation fails if the input doesn't match our regular expression
    if(!re.test(form.email.value)) {
      alert("Invalid email address");
      form.email.focus();
      return false;
    }
     // validation was successful
    return true;
}

function name(){

   If(form.name.value == "") {
      alert("Please enter your name");
      form.name.focus();
      return false;
    }

     // validation was successful
    return true;
    }
    
function msg{
        if(form.message.value == "") {
      alert("Please enter your message");
      form.message.focus();
      return false;
    }

    

    // validation fails if the input doesn't match our regular expression
    if(!re.test(form.message.value)) {
      alert("Invalid message content");
      form.message.focus();
      return false;
    }
    
    // validation was successful
    return true;}}
</script>
<script>
    function validateEmail()
{

   var emailID = document.form.email.value;
   atpos = emailID.indexOf("@");
   dotpos = emailID.lastIndexOf(".");
   if (atpos < 1 || ( dotpos - atpos < 2 )) 
   {
       alert("Please enter correct email ID")
       document.form.email.focus() ;
       return false;
   }
   return( true );
}

<form role="form" method="post" action="contact-form.php" onsubmit="return validate(this);">
        <input type="text" class="input-field" name="name" id="name" placeholder="Name" required oninvalid="alert ('Please enter your name.')"/>
    <input type="email" class="input-field" name="email" id="email" placeholder="Email" required oninvalid="alert ('Please enter a valid email.')"/>
    <textarea name="message" class="textarea-field" id="message" placeholder="Message" required oninvalid="alert ('Please enter your message.')" ></textarea>
    <input type="submit" value="Contact Me" class="btn btn-primary btn-xl"/>
</form>

Reference

edited Aug 12, 2015 at 23:46

answered Aug 12, 2015 at 20:41

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mario Parra Over a year ago

Thanks. I tried adjusting the functions for the other fields, but had no luck. I see what you've done, but the original issue still occurs. What happens is that if the name field, for example, is left blank, and the form is submitted, the error is displayed, however if the user then enters a name, the error still appears and the form cannot be submitted--it can only be submitted if the fields are filled immediately.

Rachel Gallen Over a year ago

then validate after each field - i've put them into one big function but you can separate them into sub functions

Mario Parra Over a year ago

Thanks! This works, however it's not displaying the custom error messages in the functions--only the invalid email one does.

Rachel Gallen Over a year ago

well i did it in a hurry you may need to tweak a little bit. do i get an accept?

Collectives™ on Stack Overflow

Custom Error Messages in HTML5 Required Form Fields

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related