HTML5 validation executes before custom validation

Question

I have a form which asks user to give some input values. For some initial inputs i am doing custom validation using javascript. At the end of form one field is validated using "html required attribute". But when user clicks on submit button, input box which have required attribute shows message first instead of giving chance to previous ones i.e. not following order of error display. Below i added code and image , instead of showing that name is empty it directly jumps to location input box. This just confuses the end user. Why this problem occurs and how to resolve it?

<html>
<head>
<script>
  function validate(){
    var name = document.forms['something']['name'].value.replace(/ /g,"");
    if(name.length<6){
       document.getElementById('message').innerHTML="Enter correct name";
       return false;
    }
  }
</script>
</head>

<body>

<form name="something" action="somewhere" method="post" onsubmit="return validate()">
  <div id="message"></div>
  Enter Name : <input type="text" name="name" /> <br/> <br/>
  Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
  <input type="submit" name="submit" />
</form>

</body>

</html>

score 0 · Answer 1 · edited May 23 '17 at 12:01

This is probably just the HTML5 form validation triggered because of the required attribute in the location input.

So one option is to also set the required attribute on the name. And or disable the HTML5 validation with a novalidate attribute. See here for more information: https://stackoverflow.com/a/3094185/2008111

Update

So the simpler way is to add the required attribute also on the name. Just in case someone submits the form before he/she entered anything. Cause HTML5 validation will be triggered before anything else. The other way around this is to remove the required attribute everywhere. So something like this. Now the javascript validation will be triggered as soon as the name input looses focus say onblur.

var nameElement = document.forms['something']['name'];

nameElement.onblur = function(){
    var messageElement = document.getElementById('message');
    var string = nameElement.value.replace(/ /g,"");
   if(string.length<6){
       messageElement.innerHTML="Enter correct name";
    } else {
        messageElement.innerHTML="";
    }
};

<form name="something" action="somewhere" method="post">
  <div id="message"></div>
  Enter Name : <input type="text" name="name" required="required" /> <br/> <br/>
  Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
  <input type="submit" name="submit" />
</form>

Now the above works fine I guess. But imagine you might need that function on multiple places which is kind of the same except of the element to observe and the error message. Of course there can be more like where to display the message etc. This is just to give you an idea how you could set up for more scenarios using the same function:

var nameElement = document.forms['something']['name'];
nameElement.onblur = function(){
    validate(nameElement, "Enter correct name");
};

function validate(element, errorMessage) {
    var messageElement = document.getElementById('message');
    var string = element.value.replace(/ /g,"");
   if(string.length < 6){
       messageElement.innerHTML= errorMessage;
    } else {
        messageElement.innerHTML="";
    }
}

<form name="something" action="somewhere" method="post">
  <div id="message"></div>
  Enter Name : <input type="text" name="name" required="required" /> <br/> <br/>
  Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
  <input type="submit" name="submit" />
</form>

I want to understand whether having html fields in order matters or not at the time of validations. At least here it looks like html doesn't care in which order you give the input fields , it directly goes to required attribute . Is it some kind of bug? — WeAreRight, Jan 05 '17 at 07:04
@JoneDotosvky Is it working if you entered a location without a name? I think it's just the default HTML5 validation (which is turned on by default). Your js script will not be run cause the form can not be submitted. — caramba, Jan 05 '17 at 07:36
Everything running just fine. Javascript validation for name also working. Only issue is that validation for location performs first instead of name. — WeAreRight, Jan 05 '17 at 08:48
@JoneDotosvky which validation for location? is it a javascript validation or HTML5 validation? — caramba, Jan 05 '17 at 12:37
As you can see in code , for location HTML5 validation is performed. — WeAreRight, Jan 06 '17 at 04:47

HTML5 validation executes before custom validation

1 Answers1