Magento 1.9: validate custom attribute

Question

I want to make it a last step in onepage checkout process and mandatory. So far I am able to store the value of that attribute in the database and also display it in admin/sales/order but not able to make it required field. If I keep this field empty I am still able to place order which must not happen. I followed this answer

Below are snippets from my code:

=> Installer Script:

/* @var $installer Mage_Sales_Model_Resource_Setup */
$installer = Mage::getResourceModel('sales/setup', 'sales_setup');

$installer->startSetup();

$installer->addAttribute(Mage_Sales_Model_Order::ENTITY, 'find_about_us', array (
    'label' => 'How did you hear about us?',
    'type' => 'varchar',
    'input' => 'select',
    'required' => true,
    'visible' => true,
    'options' => [
        'values' => [
            'google' => 'Google',
            'facebook' => 'Facebook',
            'referral' => 'Referral',
            'radio' => 'Radio',
            'other' => 'Other',
        ]
    ],
    'frontend_class' => 'validate-select',

));

$installer->endSetup();

=> Frontend Template (find_about_us.phtml):

<div id="find-about-us">
    <label for="custombundle_find_about_us" class="required"><em>*</em>How did you find about us?</label>
    <div class="input-box">
        <select class="input-text required-entry validate-select" name="custombundle_find_about_us" id="custombundle_find_about_us" required>
            <option value>Select</option>
            <option value="google">Google</option>
            <option value="facebook">Facebook</option>
            <option value="referral">Referral</option>
            <option value="radio">Radio</option>
            <option value="other">Other</option>
        </select>
    </div>

</div>

<script type="text/javascript">
    // Add our field to the data submitted by Review.save()
    Review.prototype.save = Review.prototype.save.wrap(function(orig) {
        //var form = this.agreementsForm ? this.agreementsForm : payment.form;
        var form = $(this.agreementsForm) ? $(this.agreementsForm) : $(payment.form);
        if (form) {
            var myfield = $('custombundle_find_about_us');
            form.insert(myfield);
        }
        orig();
    });
</script>

=> Frontend Layout:

<?xml version="1.0"?>
<layout version="0.1.0">
    <checkout_onepage_review>
        <reference name="checkout.onepage.review.info.items.after">
            <block type="core/template" name="custombundle.find_about_us" template="custombundle/onepage/find_about_us.phtml"/>
        </reference>
    </checkout_onepage_review>
</layout>

Answer 1

I suggest to use default Magento validation method as below.

Replace

<script type="text/javascript">
// Add our field to the data submitted by Review.save()
Review.prototype.save = Review.prototype.save.wrap(function(orig) {
    //var form = this.agreementsForm ? this.agreementsForm : payment.form;
    var form = $(this.agreementsForm) ? $(this.agreementsForm) : $(payment.form);
    if (form) {
        var myfield = $('custombundle_find_about_us');
        form.insert(myfield);
    }
    orig();
});
</script>

with below code

<script type="text/javascript">
// Add our field to the data submitted by Review.save()
Review.prototype.save = Review.prototype.save.wrap(function(orig) {
    //var form = this.agreementsForm ? this.agreementsForm : payment.form;

    if(!Validation.validate($('custombundle_find_about_us'))) {
       return false;
   }

    var form = $(this.agreementsForm) ? $(this.agreementsForm) : $(payment.form);
    if (form) {
        var myfield = $('custombundle_find_about_us');
        form.insert(myfield);
    }
    orig();
});
</script>