0

So basically I added a custom select address attribute. This selection has 2 available values. If value A is selected the required validation of the form for firstname and lastname is removed and making the company input required. If value B is selected it will be vice versa. The saving and backend validation is already done. The remaining work is the frontend validation for Customer Account Address and Checkout Address.

1 Answer 1

0

To achieve the frontend validation for the Customer Account Address and Checkout Address in Magento based on the selected value of a custom select attribute, you will need to customize the JavaScript validation logic. Here's a step-by-step guide to implement this:

Step 1: Create a custom JavaScript file Create a JavaScript file in your theme or module directory. For example, you can create custom-validation.js in the app/design/frontend/{Vendor}/{Theme}/web/js directory.

Step 2: Add JavaScript code Open the custom-validation.js file and add the following code:

require([
    'jquery',
    'jquery/ui',
    'jquery/validate'
], function ($) {
    $(document).ready(function () {
        var selectElement = $('#your_custom_select_attribute'); // Replace with your select attribute element ID
        
        // Add a change event listener to the select attribute
        selectElement.on('change', function () {
            var selectedValue = $(this).val();
            
            // Modify the validation rules based on the selected value
            if (selectedValue === 'A') {
                // If value A is selected, remove the required validation for firstname and lastname
                $('#firstname').removeClass('required');
                $('#lastname').removeClass('required');
                
                // Add the required validation for company
                $('#company').addClass('required');
            } else if (selectedValue === 'B') {
                // If value B is selected, remove the required validation for company
                $('#company').removeClass('required');
                
                // Add the required validation for firstname and lastname
                $('#firstname').addClass('required');
                $('#lastname').addClass('required');
            }
        });
    });
});

Note: Replace #your_custom_select_attribute, #firstname, #lastname, and #company with the appropriate element IDs or CSS selectors for your form inputs. Make sure these elements exist in your form.

Step 3: Include the JavaScript file Open the app/design/frontend/{Vendor}/{Theme}/Magento_Customer/layout/customer_account_edit.xml file (for Customer Account Address) and app/design/frontend/{Vendor}/{Theme}/Magento_Checkout/layout/checkout_index_index.xml file (for Checkout Address) and add the following code within the section:

<head>
    <script src="Magento_Customer::js/custom-validation.js"/>
</head>

Step 4:Flush Cache

1
  • This seems to only work on my account page. The form in the checkout is built using uiComponent (which I am new and not strong in this part). Jul 5, 2023 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.