views:

43

answers:

0

Hello All,
first of all i felt very sad that nobody reply my previous question, anyways i need another help from all of u masterpiece. please help me ...

i m using jQuery form plugin for ajax form submit with jQuery UI Tab.now what is prbolem, i need to validate some input field for their value, when i write any non numeric value then border become red ( working fine ), but i need that this validattion occurred before form submit, and if all is well then it goes to next tab.

right now, it unable to validate before submit however, when i click on submit button, insertion into db done and goes to 3'rd tab, but i want to add validation during submission, i tried to use jqery validator plugin addMethod but that invokes on key up, that is not suitable for me, please tell me how to use below jQuery validation before ajax submit.

i also tried $('#myForm').ajaxForm( { beforeSubmit: validate } ); method but there is fix method structure and i m unable to modify my derived jQuery function according to that.

please help me, i m in trouble since 4 days

below is my code

PHP Code ( written in joomla 1.5 component)

<style>
    .wrong { border:2px solid red; background-color:yellow; } 
</style>
<form name="propertyDetailForm" id="propertyDetailForm" action="index.php" method="POST">
    <table>
    <tr>
           <td><label for="bedroom">Total Bedroom:</label></td>
        <td> 
            <select id="bedroom" name="bedroom" >
                <option value="" >-Select-</option>
                <?php foreach (range(1,5) as $n) { ?>
                <option value="<?php echo $n; ?>" ><?php echo $n;?></option>
                <?php } ?>
            </select>
        </td>
    </tr>
    <tr>
        //----many other td  
    </tr>   
    <tr>
        <td><label for="cover_area">Total Covered Area:</label></td>
        <td><input type="text" name="cover_area" id="cover_area" >&nbsp;m&sup2;</td>
    </tr>
    <tr>
        <td align="right" valign="top"><label for="cover_veranda">Total Covered Verandas:</label></td>
        <td align="left" valign="top"><input type="text" name="cover_veranda" id="cover_veranda" >&nbsp;m&sup2;</td>
    </tr>
    </table>
    <table border="0" id="distanceTable">
      <tr>
        <td ><label for="sea_d" >Sea:</label></td>
        <td ><input type="text" name="sea_d" id="sea_d">&nbsp;Km</td>
      </tr>
      <tr>
        <td ><label for="air_d">Airport:</label></td>
        <td ><input type="text" name="air_d" id="air_d">&nbsp;Km</td>
      </tr>
      <tr>
        <td ><label for="stn_d">Railway Station:</label>
        <td ><input type="text" name="stn_d" id="stn_d">&nbsp;Km</td>
      </tr>
      <tr>
        <td ><label for="hiw_d">Highway:</label>
        <td ><input type="text" name="hiw_d" id="hiw_d">&nbsp;Km</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>
        <input type="submit" value="Add" name="doAction" class="submit" id="doAction" />                
        <input type="reset" value="Clear" name="Clear" class="submit" />
            </td>
       </tr>
    </table>
    <input type='hidden' value='com_property' name='option' />
    <input type='hidden' value='property' name='controller' />
    <input type='hidden' value='storeDetails' name='task' />
    <input type='hidden' value='' name='property_id' />     
    <input type="hidden" name="<?php echo JUtility::getToken(); ?>" value="1" />
</form>

jQuery Code

<script type="text/javascript">
    var isArea = function (val) {
                var rx=/^\d*\.?\d*$/;
                return rx.test(val);
        };
    jQuery(document).ready(function() {
        jQuery('#propertyDetailForm').submit(function() {
            //submit the form
            jQuery(this).ajaxSubmit();
            jQuery("#tabs").tabs('select',2 );
            // return false to prevent normal browser submit and page navigation
            return false;
        });

        jQuery('#cover_area, #cover_veranda').change(function() {
            if(isArea(this.value)) jQuery(this).removeClass('wrong'); else jQuery(this).addClass('wrong');
            return isArea(this.value);
        });
        // following code is to validate all inpt field together in distance table using `delagate` method
        jQuery('table#distanceTable').delegate('td input','change', function () {
            if(isArea(this.value)) jQuery(this).removeClass('wrong'); else jQuery(this).addClass('wrong');
            return isArea(this.value);
        });

    });

</script>

Thanks