Enable a form 'Submit' button if all input elements are valid

Ask the community
,
1

I’m trying to enable/disable the submit button if all input elements are valid. To do that I created the following code:

$w.onReady( function () {
$w(‘#dynamicDataset’).onReady(() => {
enableSaveIfNeeded();
//
// $w(‘#dynamicDataset’).onItemValuesChanged( () => {
// enableSaveIfNeeded()
// } );
//
let elements = getAllEditableElements($w(‘#page’));
addChangeListener(elements);
})
});

function getAllEditableElements(object) {
const strips = object.children.filter(child => child.type === “$w.ColumnStrip”);
const columns = strips.map(element => element.children).flat();
const elements = columns.map(element => element.children).flat().filter(element => (element.readOnly === false && element.enabled === true ));
return elements
}

function hasInvalidElement(page) {
let elements = Array();
elements = getAllEditableElements(page);
const invalidElements = elements.filter(element => element.valid !== true );
console.log(invalidElements);
return (invalidElements.length > 0)
}

function enableSaveIfNeeded() {
if (hasInvalidElement($w(‘#page’))) {
$w(‘#buttonSave’).disable();
} else {
$w(‘#buttonSave’).enable();
}
}

function addChangeListener(elements) {
let elementsToListen = Array();
elementsToListen = elements;
elementsToListen.forEach(element => {
// if (element.type !== “”) {
// Set observer for right element types only!
// }
element.onChange( () => {
if (element.valid) {
$w(‘#buttonSave’).enable();
} else {
$w(‘#buttonSave’).disable();
}
});
})
}

The problem is, everything works if the user leaves the input field/text box (on loosing focus) only. I also tried to observe onItemValuesChanged() of the dataset item, tried .onKeyPress() event of the element, and even tried observe it with a slight delay, but nothing helps.

2

Hi,

Few things that you could do to make it works:
1- for the input validation, you can go to input setting and choose the type of that input ( Text, Number, Email etc. )
2- For extra validation, at the button of the input setting panel, there is a field that allows you can add Pattern validation.
3- instead of checking if the input.length > 0 , you can simply mark it as required, then check if its valid.

For more information, check this out : working-with-user-input-validation-in-the-settings-panel

GoodLuck,
Mustafa

3

@mhammouz , thank you for the reference. I use all these techniques, but the question is, how to validate the input on fly to enable/disable the submit button. Thanks.

4

@alexeychekanov While you have couple of input to check, you can create a function that handles the validation, then you can use onKeyPress to check on the fly. Ex:

export function isValid() {

 let phone = $w('#phoneInput');
 let email = $w('#emailInput');
 let name = $w('#nameInput');
 
 if (!(name.valid || phone.valid || email.valid )) {
        $w("#submitButton").disable();
        
    }else{
        $w("#submitButton").enable();  
    }
}

P.s: let the submit button disabled by default.

5

@mhammouz , thank you. That’s exactly what I’m trying to do, but it seems that .onKeyPresses event fires earlier than the validity check. At the moment .onKeyPress fires the system doesn’t know yet that the object is already valid.

6

@alexeychekanov Hello Alexey, did you find a solution to your problem? I am currently facing the same issue. Thank you!

7

@maruycleo Not yet :frowning: Please share when you have any progress.

8

Hi all, any progress on this? I’m currently using very similar code to what Mustafa described and it works…with the exception of my upload button. The document gets loaded into the collection no problem if I don’t require it to be valid in order to hit submit. But if I do, it never shows as valid despite using startUpload(). I’m getting “error 200, invalid authentication token” when previewing, but I thought that might be specific to the preview. Unfortunately, the live site isn’t offering a better result.

9

any progress on this please?

10

Also experiencing the same issue, with a code that was functional before…

11

@asralsuvilgaa @Asral so update on this… i found a fix where i disabled the second question by default and will only be enabled if the first question in answered… kindly find the code below.

import wixLocation from “wix-location”;
$w.onReady( function () {
//TODO: write your page related code here…
});

export function radioGroup2_click(event) {
let test = $w(‘#radioGroup2’); //question 1
if (!test.valid){ //if question 1 is not answered
$w(“#dropdown1”).disable();
} else {
$w(“#dropdown1”).enable(); //if it is answered
} }

12

@mariona Thanks will check out!