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>
Improve this question
1
  • i cant able to see form tag above
    – Pradeep Sanku
    Jun 26, 2014 at 20:17

2 Answers 2

Reset to default
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

Improve this answer
4
  • I added that but it does not validate the form at all...
    – Run
    Jun 26, 2014 at 20:31
  • wat code you aded can you share
    – Pradeep Sanku
    Jun 26, 2014 at 20:31
  • can you take a look on my edit above please. thanks.
    – Run
    Jun 26, 2014 at 20:36
  • 1
    worked for you ?
    – Pradeep Sanku
    Jun 27, 2014 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/

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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