Using 2.1.5, I have a custom front end form with a set of text elements built (roughly) as:
<div class="field my-field required">
<label class="label" for="my-field">My Field:</label>
<div class="control">
<input id="my-field" name="my-field" data-validate="{required:true}" size="20" type="text" />
</div>
</div>
This looks fine and the validation displays properly. However, adding a checkbox input type isn't working the same way:
<div class="field my-checkbox required">
<label class="label" for="my-checkbox">My checkbox:</label>
<div class="control">
<input id="my-checkbox" name="my-checkbox" data-validate="{required:true}" type="checkbox" />
</div>
</div>
The validation seems to be working, but there is no message displayed. If, using How to make checkbox mandatory on register page in Magento 2 as an example, I remove the .control div and add a .choice to the wrapper div, the validation works and the message is displayed properly, but all formatting based on the .control class is lost, making the checkbox element not have the same UI as the rest of the form:
<div class="field choice my-checkbox required">
<label class="label" for="my-checkbox">My checkbox:</label>
<input id="my-checkbox" name="my-checkbox" data-validate="{required:true}" type="checkbox" />
</div>
Is there a way to have the checkbox element use the same classes as the rest of the form, but also have the validation messaging visible?
