Custom contact form: Validation errors appear after sending

Ask the community
,
1

Hello all,

FYI: I’m a newbie on Wix and Corvid.

I’ve create a custom contact form with just two fields:
-Email : Required, no pattern validation
-Textbox: Required
-Submit button: button6

I created a custom code validation for the two fields (see below). The code seems to working fine, however, after clicking the submit button which is linked to another page or a lightbox, the Email and Textbox fields become empty but the error messages reappear briefly before changing pages. It’s as if event handler is being recalled during page rendering.

I’ve looked at " wixWindow.rendering.env" but have no clue as how to include it in the code.

Any suggestions would be greatly appreciated. Much Tks. John

 export function button6_click(event) {
        $w("#input5").onCustomValidation((value, reject) => {
            $w("#text105").hide();
 if (value.length === 0) {
                $w("#text105").text = "Please enter an E-Mail address";
                $w("#text105").show();
                reject("Please enter a valid E-Mail address.");
            } else if (!value.includes("@") || !value.includes(".")) {
                reject("A valid E-Mail address is required.");
                $w("#text105").text = "A valid email address is required";
                $w("#text105").show();
            } else
                $w("#text105").hide();
        });

        $w("#textBox2").onCustomValidation((value, reject) => {
            $w("#text106").hide();
 if (value.length === 0) {

                $w("#text106").text = "Please include a message";
                $w("#text106").show();
                reject("Please enter a valid E-Mail address.");
            } else
                $w("#text106").hide();
        });
    }
2

I have had similar issues with the timing of onCustomValidation() event. Gave up after several attempts.
My alternative is to make use of RegExp.test() in the onInput() or onKeyPress() event like so:

const emailRegex = RegExp(‘^[a-z0-9._%±]+@[a-z0-9.-]+.[a-z]{2,}$’);
let debounceTimer;
export function email_input(event) {
// Add your code for this event here:
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
if (emailRegex.test($w(“#email”).value) === true) {
emailAddressIsValid = true;

    } 
}, 500);

}

3

Hi Prashanth,

Tks so much for your prompt response, much appreciated.
I’ve included the code as you suggested, but I have an error stating that " emailAddressIsValid" is not defined. Any suggestions?

Tks again. John

const emailRegex = RegExp('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$');
let debounceTimer;
export function email_input(event) {
        $w("#input5").onCustomValidation((value, reject) => {
            $w("#text105").hide();
 if (value.length === 0) {
                $w("#text105").text = "Please enter an E-Mail address";
                $w("#text105").show();
                reject("Please enter a valid E-Mail address.");
            } else if (!value.includes("@") || !value.includes(".")) {
                reject("A valid E-Mail address is required.");
                $w("#text105").text = "A valid email address is required";
                $w("#text105").show();
            } else
                $w("#text105").hide();
        });

        $w("#textBox2").onCustomValidation((value, reject) => {
            $w("#text106").hide();
 if (value.length === 0) {

                $w("#text106").text = "Please include a message";
                $w("#text106").show();
                reject("Please enter a valid E-Mail address.");
            } else
                $w("#text106").hide();
        });

 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
        }
        debounceTimer = setTimeout(() => {
 if (emailRegex.test($w("#input5").value) === true) {
                emailAddressIsValid = true;
        }
    }, 500);
    }
4

Hi John, I was away for a while hence the delay. My suggestion is an alternative to the ‘.onCustomValidation()’. So you are better off using either the regex approach or custom validation, not both.
You need to define any variable before using it. Declare the ‘emailAddressIsValid’ or similar variable before using it. “let emailAddressIsValid = false”. Hope this helps.

5

Hi Prashanth,

My turn to apologize for the late response.
I tried it, but did not work :frowning: There’s clearly something that I do not understand as I am an a neophyte programmer.
I will try to figure it out with your code.
Take care. John