Custom form validation using ajax.updater in magento

Question

I am trying to add custom form validation. This is what i am using.

<?php
    /* include file in magento scope */
    include_once 'app/Mage.php';
    Mage::app();
    $basePath= Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);
    $media = Mage::getBaseDir('media');

    if($_POST['model_name']!='')
    {
        echo "form submitted thanks.";die;
    }
?>

<link media="all" href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN).'adminhtml/default/default/boxes.css'; ?>" type="text/css" rel="stylesheet">
<link media="all" href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN).'adminhtml/default/default/reset.css';?>" type="text/css" rel="stylesheet">

<script type="text/javascript" src="<?php echo $basePath?>js/prototype/prototype.js"></script>
<script type="text/javascript" src="<?php echo $basePath?>js/prototype/validation.js"></script>
<script type="text/javascript" src="<?php echo $basePath?>js/varien/js.js"></script>
<script type="text/javascript" src="<?php echo $basePath?>js/varien/form.js"></script>


    <div class="entry-edit">  
    <div class="entry-edit-head">
        <h4>Model Information</h4>
    </div>
    <div id="product_options_container">
        <div id="product_options_container_top"></div>
        <div id="product_options_container">
            <div id="product_options_container_top"></div>
            <div class="hor-scroll">
                <form enctype="multipart/form-data" method="post" id="model_add_two" name="model_add2">

                <table cellspacing="0" class="form-list">
                <tbody>
                <tr>
                    <td class="label"><label for="fonts_f_name">Model Name<span class="required">*</span></label></td>
                    <td class="value">
                        <input type="text"  name="model_name" class="input-text required-entry" id="model_name">
                    </td>
                </tr>              

                <tr>
                    <td class="label"><label for="fonts_f_name">Status<span class="required">*</span></label></td>
                    <td class="value">
                        <select class="required-entry" id="status" name="status">
                            <option selected="selected" value="">Select Status</option>
                            <option value="1">Enable</option> 
                            <option value="0">Disable</option>                         
                        </select>  
                    </td>
                 </tr>

                <tr>
                    <td class="label"><label for="short_price"></label></td>
                    <td class="value">
                <input name="add_button" id="add_button" type="submit" class="scalable save"><span>Save</span></button>  </td>
            </tr>
                </tbody>
            </table>
            </form>
          <div id="formSuccess" style="display:none;">&nbsp;</div>
            </div>
          <!-- End code-->
            <div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
//<![CDATA[
    var formId = 'model_add_two';
    var myForm = new VarienForm(formId, true);
    var postUrl = '<?php echo $_SERVER['PHP_SELF']; ?>';
    function doAjax() {
        if (myForm.validator.validate()) {
            new Ajax.Updater(
                { success:'formSuccess' }, postUrl, {
                    method:'post',
                    asynchronous:true,
                    evalScripts:false,
                    onComplete:function(request, json) {
                        Element.hide(formId);
                        Element.show('formSuccess');
                    },
                    onLoading:function(request, json){
                        Element.show('formLoader');
                    },
                    parameters: $(formId).serialize(true),
                }
            );
        }
    }

    new Event.observe(formId, 'submit', function(e){
        e.stop();
        doAjax();
    });
//]]>
</script>

This is what i get after these steps. 1)click on save button - validation works. 2)fill all fields. and click on save button - form doesn't get submit. What is the issue here.

Answer 1

Couldn't find any solution for this. I had to use simple jQuery validation for this.