3

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.