summitdigitaluk Posted March 17, 2020 Share Posted March 17, 2020 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? pigeon8 1 Link to comment
michaeleparkour Posted March 17, 2020 Share Posted March 17, 2020 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. webbroi 1 Link to comment
summitdigitaluk Posted March 18, 2020 Author Share Posted March 18, 2020 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 comment
Tom_Warfield Posted May 28, 2020 Share Posted May 28, 2020 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? pigeon8 1 Link to comment
summitdigitaluk Posted May 29, 2020 Author Share Posted May 29, 2020 (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 May 29, 2020 by summitdigitaluk Clearer instructions michaeleparkour 1 Link to comment
Guest Posted August 20, 2020 Share Posted August 20, 2020 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 comment
ishtiyaqali98 Posted November 20, 2020 Share Posted November 20, 2020 (edited) 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 November 20, 2020 by ish2nv Link to comment
summitdigitaluk Posted November 27, 2020 Author Share Posted November 27, 2020 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. JamesonW 1 Link to comment
JamesonW Posted January 8, 2021 Share Posted January 8, 2021 (edited) 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 January 8, 2021 by JamesonW Link to comment
alainca Posted April 1 Share Posted April 1 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! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment