Custom Validation before ajax submit

Hii All…

I am quite new to YII . I wanted to submit a form via ajax if the form passes custom validation . I tried using ajaxsubmitButton with onclick but it didn’t help . I may be missing a very obvious point here but I have already spent a lot of time finding a solution to this problem. And if there is any other feasible way to accomplish this that will be appreciated

The code snippet I am using is

<?php

echo CHtml::ajaxSubmitButton(Yii::t(‘submit_log’,‘Finish’),CHtml::normalizeUrl(array(‘user/managelogs’,‘render’=>false)),array(‘success’ =>‘function(data){alert(data);}’),array(‘onclick’=>‘return validatealarmlog();’));

and the javascript function is

function validatealarmlog(){

    var flag = true;


    var engine1 = $("#AlarmLog_strEngineDetails1").val();    


    var engine2 = $("#AlarmLog_strEngineDetails2").val();


    var wagon1 = $("#AlarmLog_strWagonDetails1").val();


    var wagon2 = $("#AlarmLog_strWagonDetails2").val();


    var wagon3 = $("#AlarmLog_strWagonDetails3").val();


    var wagon4 = $("#AlarmLog_strWagonDetails4").val();


    var brake1 = $("#AlarmLog_strBrakeVanDetails1").val();


    var brake2 = $("#AlarmLog_strBrakeVanDetails2").val();


    if((engine1 =="") ||(engine2 =="") ||(wagon1 =="") ||(wagon2=="")||(wagon3=="")||(wagon4=="") ||(brake1=="")||(brake2=="")){


        alert("Enter all DEFECTIVE STOCK DETAILS");


        //return false;


        flag =false;


    }       


    if(!checkSpecialchar(engine1)){


        //return false;


        flag =false;


    }


   


    if(!checkSpecialchar(engine2)){


        //return false;


        flag =false;


    }


    if(!checkSpecialchar(wagon1)){


        //return false;


        flag =false;


    }


    if(!checkSpecialchar(wagon2)){


        //return false;


        flag =false;


    }


    if(!checkSpecialchar(wagon3)){


        //return false;


        flag =false;


    }


    if(!checkSpecialchar(wagon4)){


        //return false;


        flag =false;


    }


    if(!checkSpecialchar(brake1)){


        //return false;


        flag =false;


    }


    if(!checkSpecialchar(brake2)){


        //return false;


        flag =false;


    }


    var checkFlatcheckbox =$("#flat_place").attr('checked');


    if(checkFlatcheckbox == true){


        var length = $("#length").val();


        var width = $("#width").val();


        var depth = $("#depth").val();


        if(length == "" ||width =="" ||depth ==""){


            alert("enter diagnosis flate plate values");


            //return false;


            flag =false;


        }else{


            if(!checkSpecialchar(length)){


                //return false;


                flag =false;


            }


            if(!checkSpecialchar(width)){


                //return false;


                flag =false;


            }


            if(!checkSpecialchar(depth)){


                //return false;


                flag =false;


            }


        }


    }


   


    var othersCheckbox = $("#others_check").attr('checked');


    if(othersCheckbox == true){


        var others = $("#others").val();


        if(others == ""){


            alert("Enter diagnosis other details");


            //return false;


            flag =false;


        }else{


            if(!checkSpecialchar(others)){


                //return false;


                flag =false;


            }


        }


    }


   


    var out_of_roundness = $("#out_of_roundness").attr('checked');


    var defect_in_suspension = $("#defect_in_suspension").attr('checked');


    var misalignment_of_bogie = $("#misalignment_of_bogie").attr('checked');


    var uneven_loading = $("#uneven_loading").attr('checked');


    var skewness_in_carbody = $("#skewness_in_carbody").attr('checked');


     


    if(checkFlatcheckbox!=true && othersCheckbox!=true && out_of_roundness!=true && defect_in_suspension!=true && misalignment_of_bogie!=true && uneven_loading !=true && skewness_in_carbody!=true){


        alert("Enter diagnosis other details");


        //return false;


        flag =false;


    }


    var trainName = $("#train_name").val();


    if(trainName == ""){


        alert("Enter train name");


        //return false;


        flag =false;


    }else{


        if(!checkSpecialchar(trainName)){


            //return false;


            flag =false;


        }


    }





    var depot_zone = $("#depot_zone").val();


    var depot_division = $("#depot_division").val();


    var depot_depo = $("#depot_depo").val();


    var air_brake_cert_no = $("#air_brake_cert_no").val();


   


    if(depot_zone == ""){


        alert("Please enter depot zone details");


        //return false;


        flag =false;


    }else{


        if(!checkSpecialchar(depot_zone)){


            //return false;


            flag =false;


        }


    }


           


    if(depot_division == ""){


        alert("Please enter depot zone details");


        //return false;


        flag =false;


    }else{


        if(!checkSpecialchar(depot_division)){


            //return false;


            flag =false;


        }


    }





    if(depot_depo == ""){


        alert("Please enter depot zone details");


        //return false;


        flag =false;


    }else{


        if(!checkSpecialchar(depot_depo)){


            //return false;


            flag =false;


        }


    }





    if(air_brake_cert_no == ""){


        alert("Please enter depot zone details");


        //return false;


        flag =false;


    }else{


        if(!checkSpecialchar(air_brake_cert_no)){


            //return false;


            flag =false;


        }


    }


   


    var detached = $("#action_taken_0").attr('checked');


    var allowed_to_run = $("#action_taken_1").attr('checked');


    var feedback_not_recieved = $("#action_taken_2").attr('checked');


    if(detached !=true && allowed_to_run !=true && feedback_not_recieved !=true){


        alert('Select Action to be taken');


        //return false;


        flag =false;


    }

return flag;

}

The validations does work but when the function returns true then the page gets navigated to the url specified in the ajaxsubmit as if its not an ajax call…

Please Help…

For ajax-validated form you can use a normal submit button, is not needed any modification to the Gii generated form.

You have to enable ajaxValidation and validateOnSubmit, and you can put the ajax submit function in the afterValidate function of AjaxForm (check documentation for details).

Also take a loot at this post.

Hi zaccaria,

Thnx a lot for paying attention to my problem( Though its not been solved due to my negligence ).

I will try to explain again what I want to do.

Is there any way from which I can submit a form via ajax only if itafter when it passes through a javascript function… If the function returns true it should go to the specified url otherwise it should not go to the url specified…

Is there any way out…

Thnx a lot for my help…

The Yii validation is always and only server side: even if you use ajax validation, the form will be submitted to the server that will send back the result of the validation.

If you want to avoid this submission, you have to write all on your own, the framework has no instrument for help you.

If you want to follow the Yii way, you have just to turn on ajax validation and add validateOnSubmit: on sumbit the form will be submitted via ajax, checked and if the data passes the validation the page will be actually submitted, if no the errors will be highligted.