How to validate Required fields before onclick review.save when submit button

Question

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);
},

Answer 1

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. :)