Javascript Forms

JavaScript provides powerful capabilities for working with HTML forms, allowing you to handle user input, validate data, and perform various actions based on user interactions. Here are some key points to consider when working with JavaScript and HTML forms:

With JavaScript, you can validate fields such as name, password, email, date, mobile numbers, and more. This allows you to ensure that the user provides valid and properly formatted data.

Additionally, JavaScript provides the ability to validate forms on the client-side, which means that the data processing occurs directly in the user's browser. This offers the advantage of faster validation compared to server-side validation, as it doesn't require a round-trip to the server.

Here are some key points to consider when working with JavaScript and HTML forms:

Accessing Form Elements: You can access form elements using the document.getElementById() or document.forms method. This allows you to retrieve input values and perform operations on form elements.
Event Handling: JavaScript allows you to handle various form-related events such as form submission, input changes, button clicks, and more. You can use event listeners or inline event handlers to execute JavaScript code when these events occur.
Form Validation: JavaScript enables you to validate user input on the client-side before submitting the form to the server. You can perform checks on input values, such as required fields, data format, and length. Validation helps ensure that the data entered by the user meets the specified criteria.
Modifying Form Elements: JavaScript enables you to dynamically modify form elements. You can change the values, enable/disable fields, show/hide elements, or add/remove form elements based on user interactions or specific conditions.
Submitting Forms: JavaScript provides ways to submit forms programmatically using the submit() method or by manipulating the form's action and method attributes. This allows you to control the form submission process and perform additional tasks before or after the form is submitted.
AJAX and Form Handling: JavaScript can be used in combination with AJAX (Asynchronous JavaScript and XML) to submit forms asynchronously without refreshing the entire web page. This enables a smoother user experience by sending form data to the server and updating the page content dynamically.

Input:-

<body>

    <form name="myform" method="post" onsubmit="return validateform()" >

        Name: <input type="text" name="name"><br/>   

        <input type="submit" value="register">

    </form>

    <script>

        function validateform(){

            var name=document.myform.name.value;

            if (name==null || name==""){

                alert("Name can't be blank");

                return false;

            }

        }

    </script>

</body>

Test Yourself

Output:-

Here are some examples dealing with forms:

Retype Password Validation

We can set the validation to check the password entered by the user and if it does not match, it should alert the user that the password should match.

Input:-

<body>

    <form name="f1" onsubmit="return passwordMatch()">

        Password:<input type="password" name="password" /><br/>

        Re-enter Password:<input type="password" name="password2"/><br/>

        <input type="submit">

    </form>

    <script>

        function passwordMatch(){

            var firstpassword=document.f1.password.value;

            var secondpassword=document.f1.password2.value;

            

            if(firstpassword==secondpassword){

                return true;

            }

            else{

                alert("password must be same!");

                return false;

            }

        }

    </script>

</body>

Test Yourself

Output:-

Number Validation

We can validate the text field for the numeric value and for that, the isNaN() method is used.

Input:-

<body>

<form name="myform" onsubmit="return validateNumber()" >

        Number: <input type="text" name="num"><span id="numloc"></span><br/>

        <input type="submit" value="submit">

    </form>   

    <script>

        function validateNumber(){

            var num=document.myform.num.value;

            if (isNaN(num)){

                document.getElementById("numloc").innerHTML="Enter Numeric value only";

            return false;

            }

            else{

                return true;

            }

        }

    </script>

</body>

Test Yourself

Output:-

Email Validation

For email validation, there are a number criteria that need to be followed to validate the email id such as:-

Email id must contain the @ and . character
There must be at least one character before and after the @.
There must be at least two characters after the . (dot).

Input:-

<body>

  <form name="myform"  method="post" onsubmit="return validateemail();">

        Email: <input type="text" name="email"><br/>

        <input type="submit" value="register">   

    </form>   

    <script>

        function validateemail(){

            var x = document.myform.email.value;

            var atposition = x.indexOf("@");

            var dotposition = x.lastIndexOf(".");

            if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){

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

                return false;

            }

        }

    </script>

</body>

Test Yourself

Output:-

Help Us to Improve our content

Let's Talk

Javascript Forms

Here are some examples dealing with forms:

Retype Password Validation

Number Validation

Email Validation

Help Us to Improve our content

Important Links

Company

Others

Explore

Javascript Forms

Here are some examples dealing with forms:

Retype Password Validation

Number Validation

Email Validation

Help Us to Improve our content

Important Links

Follow us on social :

Company

Others

Explore

Subscribe to Our News Letter!

Follow us on social :