0

I have added a custom checkbox for terms and condition in registration box. I need it to be checked compulsory before registration. Below is my code.

<div style="width: auto; margin: 0;" class="field choice custom-terms required">
        <input type="checkbox" data-validate="{'required':true}" value="1" id="termscheck" name="custom-terms" title="<?php /* @escapeNotVerified */ echo __('Terms & conditions') ?>" id="register-input-custom" class="input-checkbox checkbox required-entry" />

        <label for="custom-terms" class="label">
            <span>
                <?php echo __('I have read and accept the ') ?><a href="https://goodwayorganic.com/new/term-and-conditions" target="_blank"><?php echo __('Terms & conditions') ?></a><?php echo __(' and ') ?><a href="https://goodwayorganic.com/new/privacy-policy" target="_blank"><?php echo __('Privacy & policy') ?></a>
            </s`enter code here`pan>
        </label>
    </div>

data-validate="{'required':true}" is not working.

For me before saving the terms and condition should be checked.

I am updating my complete form below

<form class="form create account form-create-account" action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>" method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off" data-mage-init='{"validation":{}}' >
<?= /* @noEscape */ $block->getBlockHtml('formkey'); ?>
<fieldset class="fieldset create info">
    <legend class="legend"><span><?= $block->escapeHtml(__('Personal Information')) ?></span></legend><br>
    <input type="hidden" name="success_url" value="<?= $block->escapeUrl($block->getSuccessUrl()) ?>">
    <input type="hidden" name="error_url" value="<?= $block->escapeUrl($block->getErrorUrl()) ?>">
    <?= $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Name')->setObject($block->getFormData())->setForceUseCustomerAttributes(true)->toHtml() ?>
    <?php if ($block->isNewsletterEnabled()): ?>
        <div class="field choice newsletter">
            <input type="checkbox" name="is_subscribed" title="<?= $block->escapeHtmlAttr(__('Sign Up for Newsletter')) ?>" value="1" id="is_subscribed"<?php if ($block->getFormData()->getIsSubscribed()): ?> checked="checked"<?php endif; ?> class="checkbox">
            <label for="is_subscribed" class="label"><span><?= $block->escapeHtml(__('Sign Up for Newsletter')) ?></span></label>
        </div>
        <?php /* Extensions placeholder */ ?>
        <?= $block->getChildHtml('customer.form.register.newsletter') ?>
    <?php endif ?>

    <?php $_dob = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Dob') ?>
    <?php if ($_dob->isEnabled()): ?>
        <?= $_dob->setDate($block->getFormData()->getDob())->toHtml() ?>
    <?php endif ?>

    <?php $_taxvat = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Taxvat') ?>
    <?php if ($_taxvat->isEnabled()): ?>
        <?= $_taxvat->setTaxvat($block->getFormData()->getTaxvat())->toHtml() ?>
    <?php endif ?>

    <?php $_gender = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Gender') ?>
    <?php if ($_gender->isEnabled()): ?>
        <?= $_gender->setGender($block->getFormData()->getGender())->toHtml() ?>
    <?php endif ?>
</fieldset>
<?php if ($block->getShowAddressFields()): ?>
    <fieldset class="fieldset address">
        <legend class="legend"><span><?= $block->escapeHtml(__('Address Information')) ?></span></legend><br>
        <input type="hidden" name="create_address" value="1" />

        <?php $_company = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Company') ?>
        <?php if ($_company->isEnabled()): ?>
            <?= $_company->setCompany($block->getFormData()->getCompany())->toHtml() ?>
        <?php endif ?>

        <?php $_telephone = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Telephone') ?>
        <?php if ($_telephone->isEnabled()): ?>
            <?= $_telephone->setTelephone($block->getFormData()->getTelephone())->toHtml() ?>
        <?php endif ?>

        <?php $_fax = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Fax') ?>
        <?php if ($_fax->isEnabled()): ?>
            <?= $_fax->setFax($block->getFormData()->getFax())->toHtml() ?>
        <?php endif ?>

        <?php $_streetValidationClass = $this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('street'); ?>

        <div class="field street required">
            <label for="street_1" class="label"><span><?= $block->escapeHtml(__('Street Address')) ?></span></label>
            <div class="control">
                <input type="text" name="street[]" data-validate="{'required':true,'minlength':10,'maxlength':100}" value="<?= $block->escapeHtmlAttr($block->getFormData()->getStreet(0)) ?>" title="<?= $block->escapeHtmlAttr(__('Street Address')) ?>" id="street_1" class="input-text <?= $block->escapeHtmlAttr($_streetValidationClass) ?>">
                <div class="nested">
                    <?php $_streetValidationClass = trim(str_replace('required-entry', '', $_streetValidationClass)); ?>
                    <?php for ($_i = 2, $_n = $this->helper('Magento\Customer\Helper\Address')->getStreetLines(); $_i <= $_n; $_i++): ?>
                        <div class="field additional">
                            <label class="label" for="street_<?= /* @noEscape */ $_i ?>">
                                <span><?= $block->escapeHtml(__('Address')) ?></span>
                            </label>
                            <div class="control">
                                <input type="text" data-validate="{'required':true,'minlength':10,'maxlength':100}" name="street[]" value="<?= $block->escapeHtml($block->getFormData()->getStreetLine($_i - 1)) ?>" title="<?= $block->escapeHtmlAttr(__('Street Address %1', $_i)) ?>" id="street_<?= /* @noEscape */ $_i ?>" class="input-text <?= $block->escapeHtmlAttr($_streetValidationClass) ?>">
                            </div>
                        </div>
                    <?php endfor; ?>
                </div>
            </div>
        </div>

        <div class="field country required">
            <label for="country" class="label"><span><?= $block->escapeHtml(__('Country')) ?></span></label>
            <div class="control">
                <?= $block->getCountryHtmlSelect() ?>
            </div>
        </div>

        <div class="field required">
            <label for="city" class="label"><span><?= $block->escapeHtml(__('City')) ?></span></label>
            <div class="control">
                <input type="text" name="city" data-validate="{'required':true,'minlength':3}" value="<?= $block->escapeHtmlAttr($block->getFormData()->getCity()) ?>" title="<?= $block->escapeHtmlAttr(__('City')) ?>" class="input-text <?= $block->escapeHtmlAttr($this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('city')) ?>" id="city">
            </div>
        </div>

        <div class="field region required">
            <label for="region_id" class="label"><span><?= $block->escapeHtml(__('State/Province')) ?></span></label>
            <div class="control">
                <select id="region_id" name="region_id" title="<?= $block->escapeHtmlAttr(__('State/Province')) ?>" class="validate-select" style="display:none;">
                    <option value=""><?= $block->escapeHtml(__('Please select a region, state or province.')) ?></option>
                </select>
                <input type="text" id="region" name="region" value="<?= $block->escapeHtml($block->getRegion()) ?>" title="<?= $block->escapeHtmlAttr(__('State/Province')) ?>" class="input-text <?= $block->escapeHtmlAttr($this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('region')) ?>" style="display:none;">
            </div>
        </div>

        <div class="field zip required">
            <label for="zip" class="label"><span><?= $block->escapeHtml(__('Zip/Postal Code')) ?></span></label>
            <div class="control">
                <input type="text" data-validate="{'required':true,'minlength':6,'maxlength':10}" name="postcode" value="<?= $block->escapeHtmlAttr($block->getFormData()->getPostcode()) ?>" title="<?= $block->escapeHtmlAttr(__('Zip/Postal Code')) ?>" id="zip" class="input-text validate-zip-international <?= $block->escapeHtmlAttr($this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('postcode')) ?>">
            </div>
        </div>


        <?php $addressAttributes = $block->getChildBlock('customer_form_address_user_attributes');?>
        <?php if ($addressAttributes): ?>
            <?php $addressAttributes->setEntityType('customer_address'); ?>
            <?php $addressAttributes->setFieldIdFormat('address:%1$s')->setFieldNameFormat('address[%1$s]');?>
            <?php $block->restoreSessionData($addressAttributes->getMetadataForm(), 'address');?>
            <?= $addressAttributes->setShowContainer(false)->toHtml() ?>
        <?php endif;?>
        <input type="hidden" name="default_billing" value="1">
        <input type="hidden" name="default_shipping" value="1">
    </fieldset>

<?php endif; ?>
<fieldset class="fieldset create account" data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>">
    <legend class="legend"><span><?= $block->escapeHtml(__('Sign-in Information')) ?></span></legend><br>
    <div class="field required">
        <label for="email_address" class="label"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
        <div class="control">
            <input type="email" name="email" autocomplete="email" id="email_address" value="<?= $block->escapeHtmlAttr($block->getFormData()->getEmail()) ?>" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" class="input-text" data-validate="{'required':true, 'minlength':6, 'maxlength':50, 'validate-email':true}">
        </div>
    </div>
    <div class="field password required">
        <label for="password" class="label"><span><?= $block->escapeHtml(__('Password')) ?></span></label>
        <div class="control">
            <input type="password" name="password" id="password"
                   title="<?= $block->escapeHtmlAttr(__('Password')) ?>"
                   class="input-text"
                   data-password-min-length="<?= $block->escapeHtmlAttr($block->getMinimumPasswordLength()) ?>"
                   data-password-min-character-sets="<?= $block->escapeHtmlAttr($block->getRequiredCharacterClassesNumber()) ?>"
                   data-validate="{required:true, 'validate-customer-password':true}"
                   autocomplete="off">
            <div id="password-strength-meter-container" data-role="password-strength-meter" aria-live="polite">
                <div id="password-strength-meter" class="password-strength-meter">
                    <?= $block->escapeHtml(__('Password Strength')) ?>:
                    <span id="password-strength-meter-label" data-role="password-strength-meter-label">
                        <?= $block->escapeHtml(__('No Password')) ?>
                    </span>
                </div>
            </div>
        </div>

    </div>
    <div class="field confirmation required">
        <label for="password-confirmation" class="label"><span><?= $block->escapeHtml(__('Confirm Password')) ?></span></label>
        <div class="control">
            <input type="password" name="password_confirmation" title="<?= $block->escapeHtmlAttr(__('Confirm Password')) ?>" id="password-confirmation" class="input-text" data-validate="{required:true, equalTo:'#password'}" autocomplete="off">
        </div>
    </div>
    <!--------termsandcondition--->
    <div style="width: auto; margin: 0;" class="field choice custom-terms required">
        <input type="checkbox" value="1" id="check" name="check" data-validate="{required:true, 'validate-one-required-by-name':true}" title="<?php /* @escapeNotVerified */ echo __('Terms & conditions') ?>" id="register-input-custom" class="input-checkbox checkbox required-entry" />


        <label for="custom-terms" class="label">
            <span>
                <?php echo __('I have read and accept the ') ?><a href="https://goodwayorganic.com/new/term-and-conditions" target="_blank"><?php echo __('Terms & conditions') ?></a><?php echo __(' and ') ?><a href="https://goodwayorganic.com/new/privacy-policy" target="_blank"><?php echo __('Privacy & policy') ?></a>
            </span>
        </label>
    </div>

<!--------------->

    <?= $block->getChildHtml('form_additional_info') ?>
</fieldset>
<div class="actions-toolbar">
    <div class="primary">
        <button type="submit" class="action submit primary" title="<?= $block->escapeHtmlAttr(__('Create an Account')) ?>"><span><?= $block->escapeHtml(__('Create an Account')) ?></span></button>
    </div>
    <div class="secondary">
        <a class="action back" href="<?= $block->escapeUrl($block->getBackUrl()) ?>"><span><?= $block->escapeHtml(__('Back')) ?></span></a>
    </div>
</div>

2
  • just add class required-entry only. don't add data-validate="{'required':true}" Commented Dec 27, 2018 at 13:48
  • Added the class required-entry and removed data-validate="{'required':true}" but still validation is not working Commented Dec 27, 2018 at 13:51

1 Answer 1

1

You must have data-mage-init='{"validation":{}}' in your form

<form id="custom-form" data-mage-init='{"validation":{}}'>
    <input class="input required-entry" type="checkbox" id="check" name="check" value="1" data-validate="{required:true, 'validate-one-required-by-name':true}" />  I agree to the Terms and Conditions.
    <input type="submit" value="Submit">    
</form>

Or

<form id="custom-form">
    <input class="input required-entry" type="checkbox" id="check" name="check" value="1" data-validate="{required:true, 'validate-one-required-by-name':true}" />  I agree to the Terms and Conditions.
    <input type="submit" value="Submit">    
</form>

<script type="text/x-magento-init">
    {
        "#custom-form": {
            "validation": {}
        }
    }
</script>

Update :

I tested your code and it works

enter image description here

9
  • I tried both but still not working...….. Commented Dec 27, 2018 at 14:06
  • Is there any way I can validate through .xml file for registration form because I was facing the same problem in shipping address but after validation through .xml it worked for me for shipping address Commented Dec 27, 2018 at 14:07
  • My solution works, I confirm check again your code
    – PЯINCƎ
    Commented Dec 27, 2018 at 14:09
  • 1
    Look if you have some js errors
    – PЯINCƎ
    Commented Dec 28, 2018 at 15:25
  • 1
    Cool, thanks to accept the answer if it helped you
    – PЯINCƎ
    Commented Dec 29, 2018 at 9:53

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.