JavaScript Validation

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>

// 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 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()">

<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="Password">

<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()">

<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 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.

forum

JavaScript Validation

Can you answer this question?

3 Answers