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.
Add a comment
|
1 Answer
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">
<body>
<referenceBlock name="checkout.root">
<arguments>
<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>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
then create vendorname/modulename/view/frontend/web/js/view/customjs.js
define([
'jquery',
'ko',
'uiComponent'], function ($, ko, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Prac_AnsWer/customtemp'
},
initialize: function () {
this._super();
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>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
Output : https://i.stack.imgur.com/6kIP6.png
