forum

Home / DeveloperSection / Forums / JavaScript Validation

Ask Question
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

3 Answers

Bhavesh Badani

Bhavesh Badani

21-Apr-2024

I'm going to explain a simple example of form validation using HTML and JavaScript. You can easily understand the code as i tried a lot to keep it simple and clean.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Registration Form</title>
   <style>
       /* Add some basic styling for clarity */
       body {
           font-family: Arial, sans-serif;
       }
       .error {
           color: red;
       }
   </style>
</head>
<body>
   <h1>Registration Form</h1>
   <form name="RegForm" onsubmit="return validateForm()">
       <label for="username">Username:</label>
       <input type="text" id="username" name="username" required>
       <span class="error" id="usernameError"></span><br>

       <label for="email">Email:</label>
       <input type="email" id="email" name="email" required>
       <span class="error" id="emailError"></span><br>

       <label for="password">Password:</label>
       <input type="password" id="password" name="password" required>
       <span class="error" id="passwordError"></span><br>

       <button type="submit">Register</button>
   </form>

   <script>
       function validateForm() {
           // Get form input values
           const username = document.getElementById('username').value;
           const email = document.getElementById('email').value;
           const password = document.getElementById('password').value;

           // Validate username (non-empty)
           if (username.trim() === '') {
               document.getElementById('usernameError').textContent = 'Username is required.';
               return false;
           }

           // Validate email format
           const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
           if (!emailRegex.test(email)) {
               document.getElementById('emailError').textContent = 'Invalid email format.';
               return false;
           }

           // Validate password length (at least 6 characters)
           if (password.length < 6) {
               document.getElementById('passwordError').textContent = 'Password must be at least 6 characters.';
               return false;
           }

           // All validations passed
           return true;
       }
   </script>
</body>
</html>
 

priya sharma

priya sharma

07-Dec-2023

To validate a form using JavaScript, follow these steps:

HTML Structure:
Ensure your form elements have appropriate attributes, like id and name. This helps in easy identification.

<form id="myForm" name="myForm" onsubmit="return validateForm()">
   <!-- Your form fields go here -->
   <input type="text" id="username" name="username" placeholder="Username">
   <input type="password" id="password" name="password" placeholder="Password">
   <!-- Add more fields as needed -->
   <button type="submit">Submit</button>
</form>
 

JavaScript Function:
Write a JavaScript function to handle form validation. This function should be called when the form is submitted.

function validateForm() {
   // Fetch form elements
   var username = document.forms["myForm"]["username"].value;
   var password = document.forms["myForm"]["password"].value;

   // Simple validation example
   if (username === "" || password === "") {
       alert("Please fill out all fields");
       return false; // Prevent form submission
   }

   // Add more complex validation as needed

   return true; // Allow form submission
}
 

Trigger Validation:
Ensure the validation function is triggered when the form is submitted. This can be done using the onsubmit attribute in the form tag.

<form id="myForm" name="myForm" onsubmit="return validateForm()">
   <!-- Form fields go here -->
   <button type="submit">Submit</button>
</form>

 

Enhancements:
Expand the validateForm function based on your specific form requirements. You can check for valid email formats, minimum password length, or any other criteria.

function validateForm() {
   var username = document.forms["myForm"]["username"].value;
   var password = document.forms["myForm"]["password"].value;

   if (username === "" || password === "") {
       alert("Please fill out all fields");
       return false;
   }

   // Additional validations
   if (password.length < 8) {
       alert("Password must be at least 8 characters long");
       return false;
   }

   // Add more validations as needed

   return true;
}

By following these steps, you can create a basic form validation mechanism using JavaScript. Customize it further based on your specific form and validation requirements.

For more information, You can also check this : https://stackoverflow.com/questions/57520699/how-to-validate-form-using-javascript

fsl training

https://www.javatpoint.com/javascript-form-validation

I hope this will help you.

 

Aryan Kumar

Aryan Kumar

28-Nov-2023

Form validation using JavaScript is a common practice to ensure that user input meets certain criteria before it is submitted to the server. Here's a basic example of how you can validate a form using JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation with JavaScript</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

  <form id="myForm" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <span id="nameError" class="error"></span>

    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <span id="emailError" class="error"></span>

    <br>

    <input type="submit" value="Submit">
  </form>

  <script>
    function validateForm() {
      // Reset error messages
      document.getElementById("nameError").innerHTML = "";
      document.getElementById("emailError").innerHTML = "";

      // Get form values
      var name = document.getElementById("name").value;
      var email = document.getElementById("email").value;

      // Validate Name
      if (name === "") {
        document.getElementById("nameError").innerHTML = "Name is required.";
        return false;
      }

      // Validate Email
      if (email === "") {
        document.getElementById("emailError").innerHTML = "Email is required."; return false; } else { var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { document.getElementById("emailError").innerHTML = "Invalid email address."; return false; } } // If all validations pass, the form will be submitted return true; } </script> </body> </html>

In this example:

  • The form has onsubmit set to validateForm(), which is a function that performs the validation.
  • Error messages are displayed next to the corresponding form fields if validation fails.
  • JavaScript is used to check if the name and email fields are not empty and if the email follows a basic format.

You can extend this example based on your specific validation requirements. This is a simple example, and in a real-world scenario, you might want to perform more thorough validation and potentially use a JavaScript library like Validator.js for more advanced validation rules.

MindStick Training

Liked By