Custom form validation (intercepting the form submission)

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?

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.

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.

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?  

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.

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

This is the only code I've tried that actually worked. And FYI, you can find data-form-id in developer mode in chrome when you are creating the custom form in products inventory.

Essentially, when you click add to cart and inject js code, our code executes before the form is shown. That's why it never finds the ID. Adding a settimeout, is the only way to get access to the elements within the custom form. No other way around it.

 var addtocart = document.getElementsByClassName("sqs-add-to-cart-button")[0];
    addtocart.style.backgroundColor="yellow";
  
  addtocart.onclick = function(){
  console.log("hello");

setTimeout(function() {     const buttonToDisable = document.querySelector('[data-form-id="5fb82d8ab2dc2c20b7469fe2"] input[type="submit"]');
    console.log(buttonToDisable); 

}, 1000);

On 8/20/2020 at 5:04 AM, Rodrigo218165 said:

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

Hi Rodrigo,

My example refers to a Form Block. When you are editing the page you can find the data-form-id attribute by inspecting the code and looking for the correct form element. It can be a bit tricky whilst editing the page because there are extra elements laying over the top of all the blocks on the page which Squarespace use to show the edit buttons etc...

If you inspect the page outside of the editor, it is a bit easier to find:

These examples are from 2 different websites incase you were wondering why the ID is different!

I hope this helps.

Which part of the scrip is used to designate the field that requires validation?

I have a client that wants to validate a text field to only have states/provinces in a two Capital letter format.

<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>

I have a similar challenge. I'm asking the user to find a "hidden word" somewhere in a long block of text. In the form, they enter their info (name, etc.) and also the extra word they found. I either want to disable the submit button until the user has entered the correct answer, or, on submitting with the wrong answer, return the user to the form with all the other fields retaining their values. An example of my form is here: https://www.riseto.org/agree-to-rules-validate. Anyone know how do do this? Thanks!