form validator with Javascript

Form validator is a basic function when building a website with sign-in and sign-up sites. Normally the backend will require the user's name ,email and password,meanwhile double type the email to verify the email is no typo error. 

The form contains username,email,password and verifying password.

HTML

The container includes form which can submit. Four inputs with labels.

And also link the css style and js script.

snall is the section to show up the messager.

CSS

set up the label to block to show in one line.

when input is being focused,change the brorder color and hidden the outline.

hide the message first,when error happends,the message shows up. 

and also the border color changes when the status of input changed.

when focusing the button, the style changes. 

JS

select the DOMs first ,with getElementById() or querySelector()

When the form submits, it's time to validate all the functions.

first prevent the submition before all the events async.

when error happends,showError function works.The small tag shows up.

when success,showSuccess function works. the class name is success and the message is hidden.

check every input value,if it's empty,then showError() message.otherwise run showSuccess()

And also there is other functions to validate.W3C 

And the "required" attribute in html is a good way. More details from here

check input length.

If username or password is too short or too long which is not qulified. There is number restrict length.

The getFieldName() is to convert the first character to uppercase.

check the email format .It's very convenient to do with RegEXP. stackflow

function validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

whether the two passwords is same.If not, show error message.

Here is some related form validility here:

MORE

there are lot validator libraries can be used for developer.Such as Formvalidation is a Javascript library.
For exanple,the other way to validate the email with the library

And I found a good explaination for basic Javascript for validation from freecodecamp

Another form validator with Javascript article