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

Custom form validation (intercepting the form submission)


summitdigitaluk

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

Posted Images

8 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
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
  • 0

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

 

Edited by ish2nv
Link to post
  • 0
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...

Screenshot-2020-11-27-at-10_07_56.thumb.jpg.2a88e364ef7191bcc340ff45d79f3e77.jpg

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

Screenshot-2020-11-27-at-09_59_02.thumb.jpg.9ed9e1cfd03db0fc5b48facd6e836487.jpg

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

I hope this helps.

Link to post
  • 0

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>
Edited by JamesonW
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...