Updated March 31, 2023
Most of the projects are in the client-server format, where data is accepted from the user on client-side and a request is fired from there containing the accepted data and sent to the server. The server then processes the received data in the request and sends back the response along with the necessary information to be retrieved and processed at the client-side. To continue this request-response play fluently and correctly, the most important thing is that the data which is sent as input to the server is validated properly so as a resultant thing server can send the appropriate response to the client.
What is Validation?
Validation is nothing but checking the correctness of the entered values and verifying the same. Validations can be done in two ways namely, Server-side validation and client-side validation.Both have their advantages and disadvantages. Server-side validations should be used when you have to validate the data based on available data in your database.
For example, while creating a new account the entered username needs to be validated against the already existing usernames in the database. If the username already exists which matches the entered one the user should be asked to reenter another username.There are some validations like the specified fields are compulsorily to be entered or the entered field must be in a numeric format or entered date field should be in the correct format. All these validations don’t have database dependency involved with them. If server-side validations are used then the request-response cycle can majorly affect our performances. Hence, in this case, Client-side validations should be used.
It is accessed as follows:
Collection of forms in Dom = document.forms;
To access the individual elements of a particular form i.e single form object which is represented by HTMLFormElement object, we can use elements property of HTMLFormElement as follows:
Here, the user form variable is HTMLFormElement object which represents the whole UserForm form. And it’s elements are accessed by.Elements[index] property. So we can conclude that both uname and name are the same fields.
So a single field can be accessed in two ways:
document.forms[index of form][index of element];
After running your program, if you directly press submit button it will validate the first field which is not entered which is name and hence will give an alert mentioning you have to enter this field and after you say ok the focus will be on the name field as we have written name.focus(); after alert message. Note that the sequence in which you code for validations in the script tag matters. Field displayed first should be validated first and later one should be validated next. If not done so, functionality won’t be affected but the sequence of focus and checking should always be from up to down navigating each field.
Here instead of just checking whether fields are empty, we can also check other validations like whether the field entered is number by using isNaN() or specific formats like email or mobile number using regular expressions(For more information about regular expressions refer https://www.regular-expressions.info/).