No announcement
 

Client-Side Form Validation

Client-Side Form Validation

Client-side form validation is the process of validating user input directly in the browser before sending the data to the server. It helps ensure that the data submitted by users is accurate and meets the specified requirements.

Example:

client_side_form_validation.html

<!DOCTYPE html>
<html>
<head>
  <title>Client-Side Form Validation Example</title>
</head>
<body>

<h2>Client-Side Form Validation:</h2>
<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>
  
  <button type="submit">Submit</button>
</form>
<p id="output"></p>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  
  let username = document.getElementById("username").value;
  let email = document.getElementById("email").value;
  let password = document.getElementById("password").value;
  let output = document.getElementById("output");
  
  if (username === "") {
    output.textContent = "Username is required.";
  } else if (email === "") {
    output.textContent = "Email is required.";
  } else if (!isValidEmail(email)) {
    output.textContent = "Invalid email format.";
  } else if (password === "") {
    output.textContent = "Password is required.";
  } else if (password.length < 6) {
    output.textContent = "Password must be at least 6 characters long.";
  } else {
    output.textContent = "Form submitted successfully!";
  }
});

function isValidEmail(email) {
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailPattern.test(email);
}
</script>

</body>
</html>

If you submit the form without entering data or with invalid inputs, appropriate error messages will be displayed.

Explanation:

  • In the HTML code, we have a form with input fields for username, email, and password. The form also has a <p> element with the id "output" to display validation messages.
  • In the JavaScript code, an event listener is added to the form's submit event. When the form is submitted, the event listener function is executed.
  • The event listener function prevents the default form submission behavior using event.preventDefault().
  • The input values for username, email, and password are obtained using getElementById().value.
  • A series of conditional statements checks for various validation criteria, such as empty fields, valid email format, and password length.
  • If any validation condition is not met, an appropriate error message is displayed in the <p> element with the id "output".
  • If all validation conditions are met, a success message is displayed.

Client-side form validation improves the user experience by catching errors before submitting the form to the server. It reduces unnecessary server requests and provides instant feedback to users about their input. However, it's important to note that client-side validation should always be supplemented with server-side validation to ensure the integrity of data.