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 ie 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>
1 answers
solution1
0 2017-01-05 06:54:18
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.