landing page script in Gravity Forms

Hello Davey,

If you mean that you would like to create some kind of form validation that prevents from sending the form when there are empty fields, you could add some conditions to the function.

For example you can get the fields from the form by their Id document.getElementById() , and then verify whether their value is null or undefined. If it is, you can just put a return; statement before the createObject(); function, this way the function won't be executed if the conditions are not met.

So it would look somethig like this:

jQuery(document).ready(initLanding);

$( "#gform_15" ).submit(function( event ) {

//get the elements 

document.getElementById()

if(element1 === undefined || element2 === undefined) {

//write something on screen to inform that it needs to be filled

return;

} else {

createObject();

}

}

At the moment we do not have a ready example of this functionality, but you are welcome to try your own implementation and share with us the results.

Best regards,

Dariy

Dariy Pavlyk,

Thank you for the quick comment.



It's not that I need to check the form, but it's more like:

A user doesn't fill in the required fields, but clicks on 'Submit'

Then the default form will give an error: There was a problem with your submission. Please review the fields below.

But the script is triggered already and data goes to Creatio.

So what I need is that the script is triggered when the form is actually being submitted (like a validation).

Example for contact form 7 that works

document.addEventListener( 'wpcf7submit', function( event ) {

    createObject();

}, false );

And I know it's not Creatio, but Gravity forms, so I'll keep searching unless someone has an answer.

And I'll definitely look into your code example too.

Hello Davey,

The example that I provided would solve this issue, as if there is any required field that is not filled, the  createObject(); function will not be triggered.

if(requiredElement1 === undefined || requiredElement2 === undefined) {

return;

-- This return stops the function here, it won't go down 

} else {

createObject();

}

This "return" will stop the function, it won't go further, so the function won't execute the other function called "createObject();". So no request will be sent to Creatio.

Best regards,

Dariy

Dariy Pavlyk,

Thank you Dairy,

I really appreciate it.

 

I'll test it and give some feedback

Davey Daemen,

I hope you got it working.
I have a simple checkRequired JS function I created for this scenario.
 

function checkRequired() {
    var valid = true;
    jQuery('[aria-required="true"]').each(
        function () {
            if ((jQuery(this).is(':invalid') || !jQuery(this).val()) && !jQuery(this).is(':hidden')) {
                console.log(jQuery(this));
                valid = false;
            }
        });
    if (!valid) console.log("error please fill all fields!");
    else console.log('valid');
    return valid;
}