How to make drop down required if not selected echo a message that says, "please select one option". i have attached screenshot to explain further the question i'm asking.enter image description here

1 Answer 1


Try this, this works for me,

Create checkout_index_index.xml in view/frontend/layout

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="delivery_date" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Prac_AnsWer/js/view/customjs</item>

then create vendorname/modulename/view/frontend/web/js/view/customjs.js

    'uiComponent'], function ($, ko, Component) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Prac_AnsWer/customtemp'
        initialize: function () {

            return this;

and last create template file in vendor/module/view/frontend/web/template/customtemp.html

<form action="">
    <label for="custom">Select:</label>
    <select name="custom" id="custom" required>
        <option value="">None</option>
        <option value="volvo">Option 1</option>
        <option value="saab">Option 2</option>
        <option value="mercedes">Option 3</option>
        <option value="audi">Option 4</option>
    <input type="submit" value="Submit">

Output : https://i.stack.imgur.com/6kIP6.png

  • doesn't look like it validate if you didn't pick anything on dropdown
    – Bayzel
    Sep 7, 2022 at 12:18

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.