wire.ui.validate

Validate multiple HTML elements on a page using the wire.ui.validate method. This method will apply the validation configuration UI changes to the elements that fail validation. It was return true if all the elements pass validation and false if at least one does not.

This method uses the wire.validate method for each element's validation.

Parameters

element	The root element for which descendant elements will be validated.
config	The configuration for the validation.

Config Properties

Use the following properties on the second parameter config to configure the validation.

Name	Description
css	The CSS class to be added to each element that fails validation.
elements	The object containing the configuration to be applied to each element. The configuration is the same as the one used in wire.validate. The name of each property should be the HTML element Id for each element to be validated.

Example

The following example validates three HTML elements. All three are required. user-phone needs to be a valid phone number and user-email needs to be a valid email address. If any of these conditions fail, the validate method will return false. The CSS class invalid will be added to any elements that fail validation.

const valid = wire.ui.validate(document, {
    css: "invalid",
    elements: {
        'user-name': { required: true },
        'user-phone': { required: true, type: "phone" },
        'user-email': { required: true, type: "email" }
    }
});