1

How can I make the input fields in the gift message compulsory/ required on the checkout page?

By Magento's default, you don't have to fill in these fields below, but I need to make it required if the checkbox of id="allow_gift_messages_for_order" is checked.

To
From
Message

This is the code,

<div class="allow-gift-messages-for-order-container" id="allow-gift-messages-for-order-container" style="display:none">
    <p class="micro-text-cart"><?php echo $this->__('You can leave this box blank if you do not wish to add a gift message for whole order.') ?></p>
    <input type="hidden" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][type]"  value="quote" />
    <div class="form-group">
        <ul>
            <li class="fields">

                <div class="form-group col-lg-6 field control-group name-lastname">
                    <label for="gift-message-whole-from"><?php echo $this->__('From') ?></label>
                    <div class="input-box">
                        <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][from]" id="gift-message-whole-from" title="<?php echo $this->__('From') ?>"  value="<?php echo $this->getEscaped($this->getMessage()->getSender(), $this->getDefaultFrom()) ?>" class="input-text validation-passed form-control" />
                    </div>
                </div>

                <div class="form-group col-lg-6 field control-group">
                    <label for="gift-message-whole-to"><?php echo $this->__('To') ?></label>
                    <div class="input-box">
                        <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][to]" id="gift-message-whole-to" title="<?php echo $this->__('To') ?>" value="<?php echo $this->getEscaped($this->getMessage()->getRecipient(), $this->getDefaultTo()) ?>" class="input-text validation-passed form-control" />
                    </div>
                </div>

            </li>
            <li class="wide">
                <div class="form-group">
                    <label for="gift-message-whole-message"><?php echo $this->__('Message') ?></label>
                    <div class="input-box">
                        <textarea id="gift-message-whole-message" onchange="toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to'])" class="input-text validation-passed giftmessage-area form-control" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][message]" title="<?php echo $this->__('Message') ?>" rows="5" cols="10"><?php echo $this->getEscaped($this->getMessage()->getMessage()) ?></textarea>
                    </div>
                </div>

            </li>
        </ul>
    </div>

    <script type="text/javascript">
    //<![CDATA[
        toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to']);
    //]]>
    </script>
</div>

EDIT:

<form name="my-custom-form" id="my-custom-form" action="" method="post">
<div class="form-group">
    <ul>
        <li class="fields">

            <div class="form-group col-lg-6 field control-group name-lastname">
                <label for="gift-message-whole-from" class="required"><em>*</em><?php echo $this->__('From') ?></label>
                <div class="input-box">
                    <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][from]" id="gift-message-whole-from" title="<?php echo $this->__('From') ?>"  value="<?php echo $this->getEscaped($this->getMessage()->getSender(), $this->getDefaultFrom()) ?>" class="input-text required-entry form-control" />
                </div>
            </div>

            <div class="form-group col-lg-6 field control-group">
                <label for="gift-message-whole-to" class="required"><em>*</em><?php echo $this->__('To') ?></label>
                <div class="input-box">
                    <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][to]" id="gift-message-whole-to" title="<?php echo $this->__('To') ?>" value="<?php echo $this->getEscaped($this->getMessage()->getRecipient(), $this->getDefaultTo()) ?>" class="input-text required-entry form-control" />
                </div>
            </div>

        </li>
        <li class="wide">
            <div class="form-group">
                <label for="gift-message-whole-message"><em>*</em><?php echo $this->__('Message') ?></label>
                <div class="input-box">
                    <textarea id="gift-message-whole-message" onchange="toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to'])" class="input-text required-entry giftmessage-area form-control" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][message]" title="<?php echo $this->__('Message') ?>" rows="5" cols="10"><?php echo $this->getEscaped($this->getMessage()->getMessage()) ?></textarea>
                </div>
            </div>

        </li>
    </ul>
</div>
</form>

<script type="text/javascript">
//<![CDATA[
    toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to']);
//]]>
</script>

<script type="text/javascript">
    //< ![CDATA[
        var customForm = new VarienForm('my-custom-form');
    //]]>
</script>

EDIT:

I got it solved! Need to edit the checkout.js in IWD OPC extension actually,

....
....

initSaveOrder: function(){

            $j(document).on('click', '.opc-btn-checkout', function(){
                if (IWD.OPC.Checkout.disabledSave==true){
                    return;
                }
                var addressForm = new VarienForm('billing-new-address-form');
                if (!addressForm.validator.validate()){             
                    return;
                }

                console.log($j('input[name="allow_gift_messages_for_order"]').prop('checked'));
                if ($j('input[name="allow_gift_messages_for_order"]').prop('checked') === true){
                    var giftForm = new VarienForm('gift-message-form');
                    if (!giftForm.validator.validate()){                
                        return;
                    }
                }

                if (!$j('input[name="billing[use_for_shipping]"]').prop('checked')){
                    var addressForm = new VarienForm('opc-address-form-shipping');
                    if (!addressForm.validator.validate()){             
                        return;
                    }
                }

                IWD.OPC.saveOrderStatus = true;
                IWD.OPC.Plugin.dispatch('saveOrderBefore');
                if (IWD.OPC.Checkout.isVirtual===false){
                    IWD.OPC.Shipping.saveShippingMethod();
                }else{
                    IWD.OPC.validatePayment();
                }
            });

    },
  ...
  ...

inline.html,

<div class="form-group" id="gift-message-form">
                        <ul>
                            <li class="fields">

                                <div class="form-group col-lg-6 field control-group name-lastname">
                                    <label for="gift-message-whole-from" class="required"><em>*</em><?php echo $this->__('From') ?></label>
                                    <div class="input-box">
                                        <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][from]" id="gift-message-whole-from" title="<?php echo $this->__('From') ?>"  value="<?php echo $this->getEscaped($this->getMessage()->getSender(), $this->getDefaultFrom()) ?>" class="input-text required-entry form-control" />
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 field control-group">
                                    <label for="gift-message-whole-to" class="required"><em>*</em><?php echo $this->__('To') ?></label>
                                    <div class="input-box">
                                        <input type="text" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][to]" id="gift-message-whole-to" title="<?php echo $this->__('To') ?>" value="<?php echo $this->getEscaped($this->getMessage()->getRecipient(), $this->getDefaultTo()) ?>" class="input-text required-entry form-control" />
                                    </div>
                                </div>

                            </li>
                            <li class="wide">
                                <div class="form-group">
                                    <label for="gift-message-whole-message" class="required"><em>*</em><?php echo $this->__('Message') ?></label>
                                    <div class="input-box">
                                        <textarea id="gift-message-whole-message" onchange="toogleRequired('gift-message-whole-message', ['gift-message-whole-from','gift-message-whole-to'])" class="input-text required-entry giftmessage-area form-control" name="giftmessage[<?php echo $this->getEntity()->getId() ?>][message]" title="<?php echo $this->__('Message') ?>" rows="5" cols="10"><?php echo $this->getEscaped($this->getMessage()->getMessage()) ?></textarea>
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </div>
  • i cant able to see form tag above – Pradeep Sanku Jun 26 '14 at 20:17
1
<form action="" method="post" id="someid">
<input type="checkbox" class="required-entry" />
<div class="actions">
                <button type="submit" title="Subscribe" class="button"><span><span>Sign Up</span></span></button>
            </div>
</form>
<script type="text/javascript">
    //<![CDATA[
        var FormDetail = new VarienForm('someid');
    //]]>
    </script>

i have gave you sample code in sample format. for validation to work.it should have a form and some id to it. and last it should have the script tag as shown in the code

  • I added that but it does not validate the form at all... – laukok Jun 26 '14 at 20:31
  • wat code you aded can you share – Pradeep Sanku Jun 26 '14 at 20:31
  • can you take a look on my edit above please. thanks. – laukok Jun 26 '14 at 20:36
  • 1
    worked for you ? – Pradeep Sanku Jun 27 '14 at 3:55
1

You should be able to add a "required-entry" class to your inputs and Magento will magecly add front-end != empty validation.

A little more on the subject from Inchoo: http://inchoo.net/ecommerce/magento/out-of-the-box-form-validation-in-magento/

  • I added "required-entry" to the input fields but not working.... :( – laukok Jun 26 '14 at 20:04
  • you cleared cache after editing? no apc running? – Reid Blomquist Jun 26 '14 at 20:58
  • Oh it is an opc extension running on my checkout page. is it something to do with it? – laukok Jun 26 '14 at 21:06

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.