JavaScript form validation not running correctly on HubSpot page

[jwiedenheft]

I am adding a Salesforce Web-to-Case form to a HubSpot page. I've now got the form working correctly and submitting cases to our Salesforce Sandbox. 

My issue is that the validation JS supposed to be running on the page seems to be having some problems. 

NOTE - I am NOT a JS developer or expert. Just learned about the test() function in JS yesterday.

I have a CodePen here - https://codepen.io/wiedenu/pen/eYgppPN 

The issue seems to be that only some of the validation is running. Currently, I have the following code. 

function timestamp() { var response = document.getElementById("g-recaptcha-response"); if (response == null || response.value.trim() == "") {var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);elems["ts"] = JSON.stringify(new Date().getTime());document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems); } } 
  setInterval(timestamp, 500); 

function validateForm() {

            var name = document.WebToCaseForm.name.value;
            var email = document.WebToCaseForm.email.value;
            var phone = document.WebToCaseForm.phone.value;
            var reason = document.WebToCaseForm.type.value;
            var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
            var regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var regPhone = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
            

            //VALIDATION FOR MANDATORY FIELDS 
          /*
            if (name == "") {
                alert("Name must be filled out");
                return false;
            }
            if (email == "") {
                alert("Email must be filled out");
                return false;
            }
            if (phone == "") {                            
                alert("Phone must be filled out");
                return false;
            }
            if (reason == "") {
               alert("Please provide a Reason For Contacting Us");
               return false;
            } 
            if (document.getElementById("captchaChecked").value != "true") {
                alert("Please click 'I'm not a robot'");
                return false;
            } 
            */

            //VALIDATION FOR FOMATTING
            if(!regName.test(name)){
                        alert('Invalid name given. Please provide First Name and Last Name');
                        return false;
            }
            if (!regEmail.test(email)){
                        alert('Invalid email given. Please provide a valid email address');
                        return false;
            }
            if (!regPhone.test(phone)) {                            
                        alert('Invalid phone number given. Please provide a valid phone number ie 123-456-7890');
                        return false;
            }

            alert('Form submitted successfully.  Please check your email.');

        } 

        function recaptchaCallback() {
            document.getElementById("captchaChecked").value = "true";                
        }

You can see I've commented out the VALIDATION FOR MANDATORY FIELDS section:

//VALIDATION FOR MANDATORY FIELDS 
          /*
            if (name == "") {
                alert("Name must be filled out");
                return false;
            }
            if (email == "") {
                alert("Email must be filled out");
                return false;
            }
            if (phone == "") {                            
                alert("Phone must be filled out");
                return false;
            }
            if (reason == "") {
               alert("Please provide a Reason For Contacting Us");
               return false;
            } 
            if (document.getElementById("captchaChecked").value != "true") {
                alert("Please click 'I'm not a robot'");
                return false;
            } 
            */

I've done this because (1) the name, email, and phone validation seemed redundant based on the subsequent formatting validation, and (2) it's the only way to get the formatting validation to run correctly.

If I un-comment the "reason" and "captcha" validation, the formatting validation doesn't run. 

Am I missing something? I'm also working with my internal developer, but he's not a HubSpot user, so I feel like something's lost in translation when I brought this JS over to HubSpot.

[jwiedenheft · Accepted solution]

Appreciate the input @piersg @dennisedson .

As I'm reverse-engineering this form, it seems there was quite a bit of customization "after the fact." The reason for the code not working correctly was that I was missing a couple of lines of code in the form itself. Specifically, I was missing:

• "hidden" input value for the "recaptcha"
• and the data-callback value for the recaptcha

Both of these were referred to in the JS, but weren't present in the form code, so the JS skipped validating those parts.

I really don't like reverse-engineering old code...lol

[dennisedson]

Hi @jwiedenheft ,

Wondering if @piersg could help out with this one

[piersg]

Hi @jwiedenheft (thanks @dennisedson). In your codepen you have HTML script tags wrapping your code in the JS. When I removed that and tested it worked: https://codepen.io/piersmg/pen/vYgGyrw.