Wix Code - Form Validation Error

Ask the community
,
1

Hi, I have created some simple form validation to validate a form.

The validation works as it should, the problem I am having is that after the form successfully submits, the error error messages appear, even though the form contains no content. please see attached screen shot.

I feel like something is happing with the Wix Code form validation that is conflicting with my validation. Any help would be appreciated.

--------- - --------------------------------------CODE ------------------------------------------------------

export function input1_blur(event, $w) {
// Name
$w(“#input1”).onCustomValidation((value, reject) => {
if (value.length === 0) {
reject(“Please enter a name”);
$w(“#text27”).show();
} else {
$w(“#text27”).hide();
}
});
}

export function input2_blur(event, $w) {
// Email
$w(“#input2”).onCustomValidation((value, reject) => {
if (value.length === 0) {
reject(“Please enter a valid E-Mail address.”);
$w(“#text28”).text = “Please enter an E-Mail address”;
$w(“#text28”).show();
} else if (!value.includes(“@”) || !value.includes(“.”)) {
reject(“A valid E-Mail address is required.”);
$w(“#text28”).text = “A valid email address is required”;
$w(“#text28”).show();
} else
$w(“#text28”).hide();
});
}

--------- - --------------------------------------CODE ------------------------------------------------------

1082×698 20.9 KB

2

Hi Toby,

Please note that the custom validation calls should be inside the onReady function and not inside the blur event.

Like so:

$w.onReady(function () {
	$w("#input2").onCustomValidation((value, reject) => {
		if (value.length === 0) {

			$w("#text28").text = "Please enter an E-Mail address";
			$w("#text28").show();
			reject("Please enter a valid E-Mail address.");
		} else if (!value.includes("@") || !value.includes(".")) {
			reject("A valid E-Mail address is required.");
			$w("#text28").text = "A valid email address is required";
			$w("#text28").show();
		} else
			$w("#text28").hide();
	});

	$w("#input1").onCustomValidation((value, reject) => {
		if (value.length === 0) {
			reject("Please enter a name");
			$w("#text27").show();
		} else {
			$w("#text27").hide();
		}
	});

});
3

Thanks for your reply Ido.
Unfortunately we have tried that method previously, and it resulted in the validation being applied on page load (as shown below)
This was undesired as we only wish it to be checked when the box is exited.
Do you know if there may be a way to hook into the default validation event used by the text box?
Any ideas would be appreciated

4

Hi Toby,

Your validation is alerting when the length is 0, and submitting clears the input.
Therefore, I suggest the following approach:
Try to determine whether is input is empty after a submission.
I suggest creating your own ‘onClick’ function for your submit button.
The click will submit to the database (using wixData.insert() ) and remove the validation.
Next thing to do is get the validation back up when an input is being focused again.

Good luck,
Liran.