0

How to validate Required fields before onclick="review.save();"

Is there any javascript to validate required fields before this action onclick="review.save();?

Here is my button code

<button type="submit" title="<?php echo $this->__('Place Order') ?>" class="button btn-checkout" onclick="review.save();"><span><span><?php echo $this->__('Place Order') ?></span></span></button>

This is the selection box code: (I tried both required & required-entry)

<label class="commentlabel required-entry required" for="ordercomment-comment">
                        <?php echo $survey_question; ?> <em>*</em></label>
                        <div class="input-box required-entry">
<select class="validate-select required-entry" id="socialtype" name="socialtype1" title="<?php echo $survey_question ?>">
<option value=""><?php echo $this->__("- Select -");?></option>
<option value="Friend/Relative/Acquaintance"><?php echo $this->__("Friend/Relative/Acquaintance");?></option>
<option value="Google search"><?php echo $this->__("Google search");?></option>
<option value="Gumtree Advert"><?php echo $this->__("Gumtree Advert");?></option>
<option value="Facebook"><?php echo $this->__("Facebook");?></option>
<option value="Other"><?php echo $this->__("Other");?></option>
</select>

this is opcheckout.js

var Review = Class.create();
Review.prototype = {
initialize: function(saveUrl, successUrl, agreementsForm){
    this.saveUrl = saveUrl;
    this.successUrl = successUrl;
    this.agreementsForm = agreementsForm;
    this.onSave = this.nextStep.bindAsEventListener(this);
    this.onComplete = this.resetLoadWaiting.bindAsEventListener(this);
},

save: function(){
    if (checkout.loadWaiting!=false) return;
    checkout.setLoadWaiting('review');
    var params = Form.serialize(payment.form);
    if (this.agreementsForm) {
        params += '&'+Form.serialize(this.agreementsForm);
    }
    params.save = true;
    var request = new Ajax.Request(
        this.saveUrl,
        {
            method:'post',
            parameters:params,
            onComplete: this.onComplete,
            onSuccess: this.onSave,
            onFailure: checkout.ajaxFailure.bind(checkout)
        }
    );
},

resetLoadWaiting: function(transport){
    checkout.setLoadWaiting(false, this.isSuccess);
},
2

Open file app/design/frontend/base/default/template/checkout/onepage/review/info.phtml

and add form tag to cover the this div <div id="checkout-review-submit"> like this.

<form id="review-form" action="">
<div id="checkout-review-submit">
    <?php echo $this->getChildHtml('agreements') ?>
    <div class="buttons-set" id="review-buttons-container">
        <div class="input-box required-entry">
            <select title="How did you hear about us?" name="socialtype1" id="socialtype" class="validate-select required-entry">
                <option value="">- Select -</option>
                <option value="Friend/Relative/Acquaintance">Friend/Relative/Acquaintance</option>
                <option value="Google search">Google search</option>
                <option value="Gumtree Advert">Gumtree Advert</option>
                <option value="Facebook">Facebook</option>
                <option value="Other">Other</option>
            </select>
        </div>
        <p class="f-left"><?php echo $this->__('Forgot an Item?') ?> <a href="<?php echo $this->getUrl('checkout/cart') ?>"><?php echo $this->__('Edit Your Cart') ?></a></p>
        <?php echo $this->getChildHtml('button') ?>
      <span class="please-wait" id="review-please-wait" style="display:none;">
          <img src="<?php //echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="<?php //echo $this->__('Submitting order information...') ?>" title="<?php //echo $this->__('Submitting order information...') ?>" class="v-middle" /> <?php //echo $this->__('Submitting order information...') ?>
      </span> 
    </div>
    <script type="text/javascript">
    //<![CDATA[
        review = new Review('review-form','<?php echo $this->getUrl('checkout/onepage/saveOrder', array('form_key' => Mage::getSingleton('core/session')->getFormKey())) ?>', '<?php echo $this->getUrl('checkout/onepage/success') ?>', $('checkout-agreements'));
    //]]>
    </script>
</div>
</form>

must be add the form id in above script. review = new Review('review-form','

Now open /var/www/html/skin/frontend/base/default/js/opcheckout.js add modify the following code starting with line 890 nearby.

var Review = Class.create();
Review.prototype = {
    initialize: function(form, saveUrl, successUrl, agreementsForm){
        this.form = form;
        if ($(this.form)) {
            $(this.form).observe('submit', function(event){this.save();Event.stop(event);}.bind(this));
        }
        this.saveUrl = saveUrl;
        this.validator = new Validation(this.form);
        this.saveUrl = saveUrl;
        this.successUrl = successUrl;
        this.agreementsForm = agreementsForm;
        this.onSave = this.nextStep.bindAsEventListener(this);
        this.onComplete = this.resetLoadWaiting.bindAsEventListener(this);
    },

    validate: function() {
        if(!this.validator.validate()) {
            return false;
        }else{
            return true;
        }
    },

    save: function(){
        if (checkout.loadWaiting!=false){
             return;
        }
        if (this.validate()) {
        checkout.setLoadWaiting('review');
            var params = Form.serialize(payment.form);
            if (this.agreementsForm) {
                params += '&'+Form.serialize(this.agreementsForm);
            }
            params.save = true;
            var request = new Ajax.Request(
                this.saveUrl,
                {
                    method:'post',
                    parameters:params,
                    onComplete: this.onComplete,
                    onSuccess: this.onSave,
                    onFailure: checkout.ajaxFailure.bind(checkout)
                }
            );
        }
    },

clear cache and checkout.

Happy Coding. :)

6
  • I tried both required-entry & required. I have added the dropdown box code in the description.
    – Doodu
    Apr 7 '16 at 8:36
  • For the Dropdown used this class = "validate-select"
    – Ajay Patel
    Apr 7 '16 at 8:38
  • I have used class="validate-select required-entry". Should I remove validate-select?
    – Doodu
    Apr 7 '16 at 8:39
  • no just remove required-entry
    – Ajay Patel
    Apr 7 '16 at 8:40
  • send me you url link
    – Ajay Patel
    Apr 7 '16 at 8:41

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.