08/16/2022
javascript

JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. we can make any type of validation from JavaScript. The Js provides you the facility the validate the form on the client-side so processing will be fast than server-side validation. So, most web developers prefer JavaScript form validation. Through Js, we can validate name, password, email, date, mobile number, etc fields. Form Validation in Js provides a way to validate the form’s data on the client’s computer before sending it to the webserver. First, we will create an HTML form. And for designing, we will use some CSS in it. After that, we will invoke javascript code for validation.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript Form Validation</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <h1>Welcome to the best form on Internet!</h1>
    <form aciton ="/myaction.php" name="myForm" onsubmit="return validateForm()" method="post">
        <div class="formdesign" id="name">
            Name: <input type="text" name="fname" required><b><span class="formerror"> </span></b>
        </div>

        <div class="formdesign" id="email">
            Email: <input type="email" name="femail" required><b><span class="formerror"> </span></b>
        </div>

        <div class="formdesign" id="phone">
            Phone: <input type="phone" name="fphone" required><b><span class="formerror"></span></b>
        </div>

        <div class="formdesign" id="pass">
            Password: <input type="password" name="fpass" required><b><span class="formerror"</span></b>
        </div>

        <div class="formdesign" id="cpass">
            Confirm Password: <input type="password" name="fcpass" required><b><span class="formerror"></span></b>
        </div>

        <input class="but" type="submit" value="Submit">

    </form>
</body>
<script src="index.js"></script>

</html>

Here we have taken an HTML form in which some fields have been entered like name email password etc. Here we are focusing to validate the form javascript. What is validation? Validation is a control to the form that tells the user that you have input this kind of particular data. Else you couldn’t submit the form. We make the validation because we don’t want to submit the data with wrong or invalid information. Here I show you that some of the validation which you can do by using the HTML code. no need to write javascript for that. Now we will add a little CSS to the form. To make the form e beautiful and captivating.

        body {
            padding: 10px 50px;
        }

        .formdesign {
            font-size: 20px;

        }

        .formdesign input {
            width: 50%;
            padding: 12px 20px;
            border: 1px solid blue;
            margin: 14px;
            border-radius: 4px;
            font-size: 15px;
        }

        .formerror {
            color: red;
        }

        .but {
            border-radius: 9px;
            width: 100px;
            height: 50px;
            font-size: 25px;
            margin: 22px 20px;
        }

Now we will add javascript validation so that we can apply validation in all fields like name password mobile number etc.

<script> 
function clearErrors(){

    errors = document.getElementsByClassName('formerror');
    for(let item of errors)
    {
        item.innerHTML = "";
    }


}
function seterror(id, error){
    //sets error inside tag of id 
    element = document.getElementById(id);
    element.getElementsByClassName('formerror')[0].innerHTML = error;

}

function validateForm(){
    var returnval = true;
    clearErrors();

    //perform validation and if validation fails, set the value of returnval to false
    var name = document.forms['myForm']["fname"].value;
    if (name.length<5){
        seterror("name", "*Length of name is too short");
        returnval = false;
    }

    if (name.length == 0){
        seterror("name", "*Length of name cannot be zero!");
        returnval = false;
    }

    var email = document.forms['myForm']["femail"].value;
    if (email.length>15){
        seterror("email", "*Email length is too long");
        returnval = false;
    }

    var phone = document.forms['myForm']["fphone"].value;
    if (phone.length != 10){
        seterror("phone", "*Phone number should be of 10 digits!");
        returnval = false;
    }

    var password = document.forms['myForm']["fpass"].value;
    if (password.length < 6){

        // Quiz: create a logic to allow only those passwords which contain atleast one letter, one number and one special character and one uppercase letter
        seterror("pass", "*Password should be atleast 6 characters long!");
        returnval = false;
    }

    var cpassword = document.forms['myForm']["fcpass"].value;
    if (cpassword != password){
        seterror("cpass", "*Password and Confirm password should match!");
        returnval = false;
    }

    return returnval;
}


</script>

So here is some example of the validation form element. That you can create using javascript. So you can go for it. If you really feel that this information is valid for you then follow our page. and download this code to run .https://notepad-plus-plus.org/downloads/

learning points – Home | A better learning future starts her

1 thought on “validation form using Javascript

Leave a Reply

Your email address will not be published.