HTML 5 form validation not work with onclick

form validation is the form been validated before submit. So if you want to use HTML 5 default form validation with the submit button which has an onclick event, the form validation will not work as it is skipped, because these validations are performed when the form is submitted, in fact the button with onclick method just call a normal js function.

In order to make the default validation rule take effect, some issues should be considered:

1) for the submit button, we can use either:
<button type="submit">Submit</button>
or
<input type="submit" value="Submit">
the key point here is we should have the attribute inside: type="submit"

2) instead of using onclick, we should use onsubmit in the <form>, for instance:
<form onsubmit="aFunction()">...</form>
and then the aFunction() should be invoked when the form validation passed.

How to do the validation inside our own js function, HTML5 introduces a concept called "constraint validation" which is an algorithm browsers run when a form is submitted to determine its validity. To make this determination, the algorithm utilizes new HTML5 attributes like min, max, step, pattern, and required as well as existing attributes maxlength and type.

Another choise is validate the form using DOM API:

validity is a DOM property that will returns a validityState object which contains several boolean properties for us to use, say we have a node:
var ele = document.getElementById('someId');

Example	Validity property	Notes
<input id="someId" pattern="[0-9]{4}" value="123" />	ele.validity.patternMismatch	true if the node's value does not match its pattern attribute
<input id="someId" type="number" max="2" value="1" />	ele.validity.rangeOverflow	true if the node's value is greater than its max attribute
<input id="someId" type="number" min="2" value="3" />	ele.validity.rangeUnderflow	true if the node's value is less than its min attribute
<input id="someId" type="email" value="abc" />	ele.validity.typeMismatch	true if an input node's value is invalid per its type attribute
<input id="someId" type="text" required value=" " />	ele.validity.valueMissing	true if the node has a required attribute but has no value
<input id="someId" type="text" required value="" />	ele.validity.valid	true if all of the validity conditions listed above are false

checkValidity()

The checkValidity method on a form element node (e.g. input, select, textarea) returns true if the element contains valid data, for instance:

if(ele.checkValidity()){
...
}

On form nodes it returns true if all of the form's children contain valid data,i.e.
if(document.forms['aForm'].checkValidity()){
        ...
}

In fact we do not need <form> but only a <div></div> to accommodate all the input controls, and using a <button onclick="aFun(...params)"></button>, the validation rule can be performed as below:

    if(document.getElementById("firstName").validity.valueMissing){
        alert('firstName is required');
        return false;
    }else{
        user.firstName = document.getElementById("firstName").value;
    }