How to Do Custom Form Validation with Google Apps Script in a Web App

Google Apps Script provides a powerful platform for creating web applications that interact with Google Workspace. One common requirement for web apps is form validation. In this blog post, we’ll walk through how to implement custom form validation using Google Apps Script in a web app.

Setting Up the Project

Create a New Google Apps Script Project:
- Open Google Drive, click on New > More > Google Apps Script.
- Delete any existing code in the script editor and save the project with a meaningful name.
Create the HTML Form:
- Create an HTML file (Form.html) in your Apps Script project with a simple form layout.

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
    function validateForm() {
      var name = document.getElementById('name').value;
      var email = document.getElementById('email').value;
      var error = '';

      if (name == '') {
        error += 'Name is required.\n';
      }

      var emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
      if (!email.match(emailPattern)) {
        error += 'Invalid email address.\n';
      }

      if (error != '') {
        alert(error);
        return false;
      } else {
        google.script.run.withSuccessHandler(onSuccess).submitForm(name, email);
        return false;
      }
    }

    function onSuccess(response) {
      alert(response);
    }
  </script>
</head>
<body>
  <form onsubmit="return validateForm();">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label><br>
    <input type="text" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Writing the Server-Side Code

Apps Script Code:
- Create a server-side function to handle the form submission and another function to serve the HTML form.

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Form');
}

function submitForm(name, email) {
  // Perform additional server-side validation if necessary
  if (name === '' || !validateEmail(email)) {
    return 'Validation failed. Please check your inputs.';
  }

  // Process the form data (e.g., save to a sheet, send an email, etc.)
  return 'Form submitted successfully! Name: ' + name + ', Email: ' + email;
}

function validateEmail(email) {
  var emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  return email.match(emailPattern);
}

Deploying the Web App

Deploy the Script as a Web App:
- Click on Deploy > New deployment.
- Choose Web app as the deployment type.
- Set Execute as to Me and Who has access to Anyone.
- Click Deploy, authorize the script, and copy the deployment URL.

Testing the Web App

Test the Form:
- Open the deployment URL in your browser.
- Try submitting the form with various inputs to see how the validation works.

Enhancing the Validation

You can enhance the form validation by adding more complex rules or using third-party libraries. For example, you can add validations for phone numbers, postal codes, or specific formats required by your application.

Conclusion

Custom form validation in Google Apps Script web apps allows you to ensure data integrity and provide a better user experience. By combining client-side validation with additional server-side checks, you can create robust and secure web applications.