Swati Lathia

Learning ways

JavaScript Form Validation

<script>
function validateForm() {
          // Name validation: must not be empty and must contain only letters and spaces
          var name = document.getElementById("name").value;
          if (name.trim() === "") {
              alert("Name is required.");
              return false;
          }
          if (!isNaN(name)) {
              alert("Name cannot contain numbers.");
              return false;
          }
      
          // Date of Birth validation: must not be empty and must be a valid date
          var dob = document.getElementById("dob").value;
          if (dob.trim() === "") {
              alert("Date of birth is required.");
              return false;
          }
          var dobDate = new Date(dob);
          if (isNaN(dobDate.getTime())) {
              alert("Please enter a valid date of birth.");
              return false;
          }
      
          // Address validation: must not be empty
          var address = document.getElementById("address").value;
          if (address.trim() === "") {
              alert("Address is required.");
              return false;
          }
      
          // Pincode validation: must be 6 digits
          var pincode = document.getElementById("pincode").value;
          if (pincode.trim() === "") {
              alert("Pincode is required.");
              return false;
          }
          if (pincode.length !== 6 || isNaN(pincode)) {
              alert("Pincode must be 6 digits.");
              return false;
          }
      
          // Mobile number validation: must be 10 digits and only numbers
          var mobile = document.getElementById("mobile").value;
          if (mobile.trim() === "") {
              alert("Mobile number is required.");
              return false;
          }
          if (mobile.length !== 10 || isNaN(mobile)) {
              alert("Mobile number must be 10 digits.");
              return false;
          }
      
          // Email validation: must not be empty and must contain "@" and "."
          var email = document.getElementById("email").value;
          if (email.trim() === "") {
              alert("Email address is required.");
              return false;
          }
          if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
              alert("Please enter a valid email address.");
              return false;
          }
      
          // Password validation: must not be empty and must be at least 8 characters
          var password = document.getElementById("password").value;
          if (password.trim() === "") {
              alert("Password is required.");
              return false;
          }
          if (password.length < 8) {
              alert("Password must be at least 8 characters long.");
              return false;
          }
      
          // If all validations pass, return true
          alert("Form submitted successfully!");
          return true;
      }
</script>  
<form onsubmit="return validateForm()">
          <table border>
                    <tr>
                              <td><label for="name">Name:</label></td>
                              <td><input type="text" id="name" name="name"></td>
                    </tr>
                    <tr>
                              <td><label for="dob">Date of Birth:</label></td>
                              <td><input type="date" id="dob" name="dob"></td>
                    </tr>
                    <tr>
                              <td><label for="address">Address:</label></td>
                              <td><textarea id="address" name="address"></textarea></td>
                    </tr>
                    <tr>
                              <td><label for="pincode">Pincode:</label></td>
                              <td><input type="text" id="pincode" name="pincode"></td>
                    </tr>
                    <tr>
                              <td><label for="mobile">Mobile Number:</label></td>
                              <td><input type="text" id="mobile" name="mobile"></td>
                    </tr>
                    <tr>
                              <td><label for="email">Email:</label></td>
                              <td><input type="email" id="email" name="email"></td>
                    </tr>
                    <tr>
                              <td><label for="password">Password:</label></td>
                              <td><input type="password" id="password" name="password"></td>
                    </tr>
                    <tr>
                              <td colspan="2" align="center"><input type="submit" value="Submit"></td>
                    </tr>
                      
          
          </table>
      </form>
      
Scroll to top