Form Handling and Validation in JavaScript

HTML form validation can be done with JS.

Form validation normally used on the server, after the user had fill up all the data and then hit the submit button.

If the data entered by a user was incorrect or was something missing, the server will send all the data back to the user and request that the form need to be resubmitted with correct information.

JS provides a way to validate form’s data on the user’s computer before sending it to the web server. In Form validation, there will be two functions.

Basic − the form will checked to make sure all the mandatory fields are filled in. It would require just a loop in the form and check for data.
Data Format − the data must be checked for correct form and value. Developer’s code must include with logic to test correctness of data.

Different types of form validation

There are two types of validation:

Client-side validation is validation that occurs before the data has been submitted to the server.

Client side validation is performed by a web browser, before input is sent to a web server.

Client side validation check data and then send to server in avoid unnecessary server call

Server-side validation is validation which occurs after the data has been submitted.

This is performed by a web server, after input has been sent to the server.

A response is sent back to the user to tell what corrections to make,If the data fails authentication.

EXAMPLE

<html>

<head>
    <script>
        functionmyForm() {
            varjsx = document.forms["myjsForm"]["firstname"].value;
            if (jsx == "") {
                alert("Please fill the Name");
                return false;
            }
        }
    </script>
</head>

<body>

    <form name="myjsForm" action="" onsubmit="return myForm()" method="post">
        Name:
        <input type="text" name="firstname">
        <input type="submit" value="hit">
    </form>
</body>

</html>

<html>

<head>

functionmyForm() {

varjsx = document.forms["myjsForm"]["firstname"].value;

if (jsx == "") {

alert("Please fill the Name");

return false;

}

</script>

</head>

<body>

Name:

</form>

</body>

</html>

OUTPUT

Form field (firstname) is empty, so the function alerts a message, and returns false value.

Data Validation

Data validation is the process for ensuring that user input is clean, correct.

Validation tasks are:

Is user filled in all required fields?
Is user entered a valid date?
Is user entered text in a numeric field?

Some Validation HTML Input Attributes:

Disabled – This is specifies that the input element should be disabled

Max – This is specifies the maximum value of an input element

Min – This is specifies the minimum value of an input element

Pattern – This is specifies the value pattern of an input element

Required – This is specifies that the input field requires an element

Type – This is specifies the type of an input element

Form Example

<html>

<head>
    <script>
        functionmyJs() {
            var name = document.forms["RegForm"]["Name"];
            var address = document.forms["RegForm"]["Address"];
            var email = document.forms["RegForm"]["EMail"];
            var phone = document.forms["RegForm"]["Telephone"];
            var password = document.forms["RegForm"]["Password"];

            if (name.value == "") {
                window.alert("Please enter your name.");
                name.focus();
                return false;
            }

            if (address.value == "") {
                window.alert("Please enter your address.");
                name.focus();
                return false;
            }

            if (email.value == "") {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (email.value.indexOf("@", 0) < 0) {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (email.value.indexOf(".", 0) < 0) {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (phone.value == "") {
                window.alert("Please enter your telephone number.");
                phone.focus();
                return false;
            }

            if (password.value == "") {
                window.alert("Please enter your password");
                password.focus();
                returnflase;
            }
            return true;
        }
    </script>

</head>

<body>
    <form name="RegForm" action="" onsubmit="return myJs()" method="post">
        <p>Name:
            <input type="text" name="Name">
        </p>
        <br>
        <p> Address:
            <input type="text" name="Address">
        </p>
        <br>
        <p>E-mail Address:
            <input type="text" name="EMail">
        </p>
        <br>
        <p>Password:
            <input type="text" name="Password">
        </p>
        <br>
        <p>Telephone:
            <input type="text" name="Telephone">
        </p>
        <br>
        <p>
            <input type="submit" value="send" name="Submit">
        </p>
    </form>
</body>

</html>

<html>

<head>

functionmyJs() {

var name = document.forms["RegForm"]["Name"];

var address = document.forms["RegForm"]["Address"];

var email = document.forms["RegForm"]["EMail"];

var phone = document.forms["RegForm"]["Telephone"];

var password = document.forms["RegForm"]["Password"];

if (name.value == "") {

window.alert("Please enter your name.");

name.focus();

return false;

}

if (address.value == "") {

window.alert("Please enter your address.");

name.focus();

return false;

}

if (email.value == "") {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (email.value.indexOf("@", 0) < 0) {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (email.value.indexOf(".", 0) < 0) {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (phone.value == "") {

window.alert("Please enter your telephone number.");

phone.focus();

return false;

}

if (password.value == "") {

window.alert("Please enter your password");

password.focus();

returnflase;

}

return true;

}

</script>

</head>

<body>

<p>Name:

</p>

<br>

<p> Address:

</p>

<br>

<p>E-mail Address:

</p>

<br>

<p>Password:

</p>

<br>

<p>Telephone:

</p>

<br>

<p>

</p>

</form>

</body>

</html>

Some Validation HTML Input Attributes:

Read More