It will be checking your accuracy

Nothing is more frustrating than filling out a badly designed form. How many times you have entered a password only to be taken back with red ink proclaiming “ERROR! Password needs a capital letter, two numbers, a special character”, and whatnot. What sort of requirements they are looking for? What is the purpose behind this?

Sample for a ‘form’

Firstly, #thankYouForPickingUptheBlog. It has been written to get aware about that much-needed corner in a website, “A form”. Traditionally, the term ‘form’ has referred to a printed document that contains spaces for you to fill in the information. HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors to your site.

Whether you are adding a simple search box to your website or you need to create more complicated insurance applications, your application should always perform security checks as above mentioned on any form-submitted data on the server-side as well as the client-side. However, when we concern about client-side validation, it should not be considered an exhaustive security measure because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server. Isn’t it worth add up more about this to your knowledge? The action of checking or proving the validity or accuracy of what you entered: its Client-side form validation

This concept helps validate the contents of the form before it is submitted to the server as:

What is form validation?

Form validation is a “technical process where a web-form checks if the information provided by a user is correct.” When we reach any popular site with a registration form, you will notice that they provide feedback when you do not enter your data in the format they are expecting and will receive a message such as:

Username should be according to their preference
Displays an error in enterd email address format
Password should be consist minimum of8 characters and at least 1 number

Simply, the application allows the data to be sent and (usually) saved to the server database when the information is formatted correctly; the application sends the user an error message indicating what needs to be corrected and allows them to try again when the data is not formatted correctly. This is referred to as ‘form validation.’

Here when I correctly enter my name, email address and password, it works and the error messages disappear as follow:

Here the ERROR messages have disappeared and possible to submit your information

Warning: Do not trust the data of the client to the server. Any malicious person may still need to adjust the network, even though your form validates correctly and prevents malformed feedback from the client.

Why are they asking for our checks to be validated?

Various forms of customer-side validation

Two forms of validation of the client-server can be found on the internet, including,

Built-in form validation

HTML5 form validation example

One of the main advantages of HTML5 form control is the ability to validate most user data without using JavaScript functionality. HTML5 Form Validation Example When all the rules defined by the attributes below are followed by the data entered in the form field, they are considered valid. If this is not the case, the invalidity is considered.

EXAMPLE

Here follow the below link to full example to showcase the usage of HTML’s built-in validation features.

Validating forms using JavaScript

If you wish to control or deal with older browsers that cannot support the HTML-based validation of native error messages, you must use JavaScript.

JavaScript form validation exmple

The constraints Validation API

The Constraint Validation API, consisting of a series of methods and features on the following form elements, is supported by the majority of browsers:

HTMLButtonElement (represents a <button> element)

HTMLFieldSetElement (represents a <fieldset> element)

HTMLInputElement (represents an <input> element)

HTMLOutputElement (represents an <output> element)

HTMLSelectElement (represents a <select> element)

HTMLTextAreaElement (represents a <textarea> element)

Implementing a customized error message

As you’ve already seen in the HTML5 validation limit, the browser displays an error message every time a user attempts to submit an invalid form. Depending on the browser, how this message will be displayed.

These automated messages have two drawbacks:

Changing these error messages is one of the most common uses of API restriction validation. Take a simple example of how this is done.

<form>
<label for="mail">I would like you to provide me with an e-mail address:</label>
<input type="email" id="mail" name="mail">
<button>Submit</button>
</form>

And add the following JavaScript to the page:

const email = document.getElementById("mail");

email.addEventListener("input", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("I am expecting an e-mail address!");
} else {
email.setCustomValidity("");
}
});

Here we store a reference to the email input, then add an event listener to it that runs the contained code each time the value inside the input is changed.

EXAMPLE

Follow the links given below to have a practice with Edureka and JavaPoint and look at the JavaScript that implements the custom error validation in various aspects

Quick Recap

Client-side form validation Often JavaScript is needed if you want to configure style and error messages, but you do need to think carefully about the consumer. Always remember to help your users to correct the data they provide. To that end, be sure:
- Displays explicit error messages.
- Please be permissive regarding the input format.
- Point out precisely where the error happens, particularly in large types.

National Table Tennis Player | Undergraduate at University of Moratuwa