Forms are an essential part of any web application, allowing users to input data and interact with the server. Form validation is crucial to ensure that the data submitted by users is valid and meets certain criteria. In this blog post, we will look at how to implement both client-side and server-side form validation in Express.js.

Client-side Form Validation

Client-side form validation is performed on the client’s browser using JavaScript before submitting the form to the server. It provides immediate feedback to the user and improves the user experience. Here is an example of how to implement client-side validation for a form in Express.js:

// index.html
<form id="myForm" action="/submit" method="POST">
  <input type="text" name="username" id="username" required>
  <input type="password" name="password" id="password" required>
  <button type="submit">Submit</button>
</form>

// script.js
document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

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

  // Additional validation logic

  this.submit();
});

In the above example, we attach an event listener to the form’s submit event. We prevent the default form submission using preventDefault() to perform our own validation logic. If any required fields are empty, we display an error message. Additional validation logic specific to your application can be added as needed.

Server-side Form Validation

Client-side form validation can be bypassed, making it crucial to perform server-side validation as well. Server-side validation is performed on the server using Express.js middleware to ensure the submitted data meets the required criteria. Here is an example of how to implement server-side validation for a form in Express.js:

// app.js
const express = require("express");
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post("/submit", function(req, res) {
  const { username, password } = req.body;

  if (!username || !password) {
    return res.status(400).json({ error: "Please fill in all fields." });
  }

  // Additional validation logic

  // Save data to the database or perform other actions

  res.status(200).json({ success: "Form submitted successfully." });
});

app.listen(3000, function() {
  console.log("Server is running on port 3000");
});

In this example, we use the Express.js json and urlencoded middleware to parse the request body. We define a POST route to handle form submissions. We extract the username and password fields from the request body. If any required fields are missing, we return a 400 Bad Request response with an error message. Additional validation logic specific to your application can be added as needed. If the form data is valid, we can save it to the database or perform any other necessary actions.

Both client-side and server-side form validation are important to ensure the data submitted by users is valid. While client-side validation provides immediate feedback to users, server-side validation is essential to prevent data manipulation before storing it in the database. By combining both approaches, you can create a robust form validation system in your Express.js application.

#ExpressJS #FormValidation