Back





This example shows the validation of an AvalynxAutocomplete field within an AvalynxForm form.



Example Source Code


document.addEventListener('DOMContentLoaded', () => {
    const products = [
        { key: 'PROD001', value: 'Laptop' },
        { key: 'PROD002', value: 'Smartphone' },
        { key: 'PROD003', value: 'Tablet' },
        { key: 'PROD004', value: 'Monitor' }
    ];

    const tags = [
        { key: 'TAG001', value: 'Electronics' },
        { key: 'TAG002', value: 'Offer' },
        { key: 'TAG003', value: 'New' },
        { key: 'TAG004', value: 'Bestseller' }
    ];

    const productAutocomplete = new AvalynxAutocomplete('#customer_autocomplete', {
        data: products,
        clearStyle: 'icon'
    });

    const tagAutocomplete = new AvalynxAutocomplete('#customer_tags', {
        data: tags,
        minSelections: 2,
        maxSelections: 5,
        tagsPosition: 'inline',
        clearStyle: 'button'
    });

    const form = new AvalynxForm('form_validation', {
        onSuccess: (response) => {
            alert('Validation successful');
        },
        onError: (response) => {
            console.log('Form submission failed:', response);
        }
    });

    document.getElementById('form_validation').addEventListener('reset', () => {
        productAutocomplete.clear();
        tagAutocomplete.clear();
    });
});
    
AvalynxForm on GitHub AvalynxAutocomplete on GitHub