Title: How to Add Basic JavaScript Form Validation Prior to Processing a HTML Form
Last modified: January 19, 2024

---

# How to Add Basic JavaScript Form Validation Prior to Processing a HTML Form

 *  [dealtek](https://wordpress.org/support/users/dealtek/)
 * (@dealtek)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/how-to-add-basic-javascript-form-validation-prior-to-processing-a-html-form/)
 * Hi all,
 * I’m sure there are plug-ins to do this, however I would like to create very basic
   HTML form on a page add basic form validation hopefully with simple JavaScript.
 * I already added the HTML form to the page and now I am curious how to add the
   basic JavaScript validation prior to processing the form.
 * Can someone help me with this task?
 * Thanks in advance – Dave

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Albert Bretado](https://wordpress.org/support/users/abretado1985/)
 * (@abretado1985)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/how-to-add-basic-javascript-form-validation-prior-to-processing-a-html-form/#post-17358555)
 * First, make sure your HTML form has the necessary fields and a submit button.
   For example:
 *     ```wp-block-code
       <form id="myForm">
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" required>
   
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" required>
   
         <input type="submit" value="Submit">
       </form>
       ```
   
 * Next, you’ll need to create a JavaScript function that will handle the form submission
   and perform validation. Place this script just before the closing `</body>` tag
   in your HTML document:
 *     ```wp-block-code
       <script>
         document.getElementById("myForm").addEventListener("submit", function(event) {
           // Prevent the form from submitting automatically
           event.preventDefault();
   
           // Get the values from the form
           var name = document.getElementById("name").value;
           var email = document.getElementById("email").value;
   
           // Perform validation
           if (name === "") {
             alert("Please enter your name.");
             return false; // Prevent form submission
           }
   
           if (!isValidEmail(email)) {
             alert("Please enter a valid email address.");
             return false; // Prevent form submission
           }
   
           // If all validation passes, you can submit the form
           // You can add additional processing code here
   
           // For demonstration purposes, let's alert a success message
           alert("Form submitted successfully!");
         });
   
         // Function to validate email format
         function isValidEmail(email) {
           var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
           return emailPattern.test(email);
         }
       </script>
       ```
   
 * In the above code:
    - We use `addEventListener` to attach a JavaScript function to the form’s `submit`
      event.
    - Inside the event handler function, we prevent the form from submitting automatically
      using `event.preventDefault()`.
    - We retrieve the values of the name and email fields.
    - We perform validation checks:
       * Check if the name field is empty.
       * Check if the email field matches a valid email pattern using a regular 
         expression (`isValidEmail` function).
    - If any validation check fails, we display an alert message and return `false`
      to prevent form submission.
    - If all validation checks pass, you can add your custom processing code (e.
      g., sending data to a server) or simply submit the form.
 * This code provides basic client-side validation for your form. You can customize
   it further according to your specific requirements.
 *  [George Appiah](https://wordpress.org/support/users/gappiah/)
 * (@gappiah)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/how-to-add-basic-javascript-form-validation-prior-to-processing-a-html-form/#post-17358815)
 * [@abretado1985](https://wordpress.org/support/users/abretado1985/): Note that
   depending on what “basic validation” you’re after, you may be able to do it in
   pure HTML without any JavaScript.
 * For instance, I understand [@dealtek](https://wordpress.org/support/users/dealtek/)
   response is only an example meant to be customized for your needs. But if the
   only validation you’re looking for is if a field has been filled, if the email
   address entered is valid (format only), if a number field is within a range, 
   if a text field has a minimum number of characters, etc… then the JS would be
   totally redundant as the HTML form can be coded to handle these directly.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to Add Basic JavaScript Form Validation Prior to Processing a HTML
Form’ is closed to new replies.

## Tags

 * [form](https://wordpress.org/support/topic-tag/form/)
 * [html](https://wordpress.org/support/topic-tag/html/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 3 participants
 * Last reply from: [George Appiah](https://wordpress.org/support/users/gappiah/)
 * Last activity: [2 years, 4 months ago](https://wordpress.org/support/topic/how-to-add-basic-javascript-form-validation-prior-to-processing-a-html-form/#post-17358815)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics