Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom form validation (intercepting the form submission)


Question

Has anybody had any experience with adding their own validation to a Squarespace form? Essentially stopping the normal submission process, checking some custom validation, then continuing as normal/stopping the submission if there was an invalid entry?

I have a client that needs some number fields to be submitted within a specific range and a few other variations on this theme. I'm hoping to find a simple solution, but I'm also happy to go with a very complicated one ūüėÜ

@michaeleparkour Do any of your plugins do this, or perhaps this is something you have come up against?

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Has anybody had any experience with adding their own validation to a Squarespace form? Essentially stopping the normal submission process, checking some custom validation, then continuing as normal/st

Can you explain in a little more detail how to do those steps?  Disable submit button?  Listen for input changes?  Is this something that would require Developer Mode?  

Hi @Tom_Warfield. This does not require Developer Mode, but you may need to upgrade your plan to enable Code Injection. A basic example would be like this: <script> //Specific fo

5 answers to this question

Recommended Posts

  • 1

Tons of js validation libraries around... I have no ready-to-use simple solution for you, but the idea is simple: disable submit button on load, set all inputs to required,  listen inputs changes, validate values you need - if all good enable submit button.

Link to post
  • 0
15 hours ago, michaeleparkour said:

Tons of js validation libraries around... I have no ready-to-use simple solution for you, but the idea is simple: disable submit button on load, set all inputs to required,  listen inputs changes, validate values you need - if all good enable submit button.

@michaeleparkour You are a genius. Such a simple solution! I was totally over-complicating it in my head.

Link to post
  • 0
Posted (edited)
13 hours ago, Tom_Warfield said:

Can you explain in a little more detail how to do those steps?  Disable submit button?  Listen for input changes?  Is this something that would require Developer Mode?  

Hi @Tom_Warfield.

This does not require Developer Mode, but you may need to upgrade your plan to enable Code Injection.

A basic example would be like this:

<script>
  //Specific form button to disable/re-enable
  const buttonToDisable = document.querySelector('[data-form-id="5ecfda33f13530766af10f1d"] input[type="submit"]');
  
  //Add 'disabled' attribute to the form button
  buttonToDisable.disabled = true;
  
  //Specific form input which needs custom validation
  let inputToValidate = document.querySelectorAll('[data-form-id="5ecfda33f13530766af10f1d"] input.text')[0];
  
  //Listen for changes to our input
  inputToValidate.addEventListener('input', function(e) {
    //Do your validation on every keystroke.
    //A basic example below. You could use a JS library for more complex validate.
    if(this.value) {
      //A value has been entered, re-enable button and continue with standard Squarespace submission
      buttonToDisable.disabled = false;
    }
  });
</script>

You would add this to your website's Footer by going to Settings  > Advanced > Code Injection.

You would need to further develop this example for a good user experience as the form button would do nothing until the user had added content to our specific input. But in principle, this would be a good starting point.

Edited by summitdigitaluk
Clearer instructions
Link to post
  • 0
On 5/29/2020 at 6:28 AM, summitdigitaluk said:

Hi @Tom_Warfield.

This does not require Developer Mode, but you may need to upgrade your plan to enable Code Injection.

A basic example would be like this:


<script>
  //Specific form button to disable/re-enable
  const buttonToDisable = document.querySelector('[data-form-id="5ecfda33f13530766af10f1d"] input[type="submit"]');
  
  //Add 'disabled' attribute to the form button
  buttonToDisable.disabled = true;
  
  //Specific form input which needs custom validation
  let inputToValidate = document.querySelectorAll('[data-form-id="5ecfda33f13530766af10f1d"] input.text')[0];
  
  //Listen for changes to our input
  inputToValidate.addEventListener('input', function(e) {
    //Do your validation on every keystroke.
    //A basic example below. You could use a JS library for more complex validate.
    if(this.value) {
      //A value has been entered, re-enable button and continue with standard Squarespace submission
      buttonToDisable.disabled = false;
    }
  });
</script>

You would add this to your website's Footer by going to Settings  > Advanced > Code Injection.

You would need to further develop this example for a good user experience as the form button would do nothing until the user had added content to our specific input. But in principle, this would be a good starting point.

Where can I get that data-form-id from? I can't find it

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


√ó
√ó
  • Create New...