JQuery Validation not working on Ajax Control....!

Question

Hi there I have Problem with my Code I just want to validate States which is generated from Ajax response.text

Here is the JQuery for State Field

$(document).ready(function(){
var form = $("#addStudentfrm");

    var state = $("#state");
var stateInfo = $("#stateInfo");

    state.blur(validateStates);
    state.keyup(validateStates);


    function validateStates(){
    if(state.val()== ''){
        state.addClass("error");
        stateInfo.text("Please Select/Enter State");
        stateInfo.addClass("error5");
        return false;
    }else{
        state.removeClass("error");
        stateInfo.text("");
        stateInfo.removeClass("error5");
        return true;
    }

}   });

Here PHP Function for Get All States in Respected Country

public function getAllCountryStates($post){
$que = "Select * from ".WMX_COUNTRY." where code = '".$post[value1]."'";
$cRes = $this->executeQry($que);
$cResult = $this->getResultRow($cRes);
$cId = $cResult['id'];
$stateObj = new Admin;
$rdat = $post['opr'];
$rdtar = explode('.', $rdat);
$res = @mysql_fetch_row(mysql_query("Select * from ".$rdtar['1']." where id = ".$rdtar['0']));
$usts = $res['state'];
$result = $stateObj->selectQry(WMX_STATE,"country_id=$cId",'','');
$number = $stateObj->getTotalRow($result);

if($number > 0){
        $getSelect ="<select name='state' id='state' class='textboxcss'>";
    while($stateVal = $stateObj->getResultRow($result)){
               $getSelect.="<option value='".$stateVal[state]."'>$stateVal[state]</option>";
}
    $getSelect.="</select>";
}else{
    if($usts!=''){
        $getSelect = "<input type='text' name='state' id='state'class='textboxcss' value='$admnState'/>";
    } else {
        $getSelect = "<input type='text' name='state' id='state' class='textboxcss'/>";
    }
}
    echo $getSelect;  }

In the Initial State Text box getting validate

but when the control comes with the Ajax Response Jquery wont validate it for Blank Entries

my Ajax Function

function DataByPost(url,objId,postData,div_id){ var selId = objId.split('|'); var passData = postData; var AJAX = null; if (window.XMLHttpRequest) { AJAX=new XMLHttpRequest(); } else { AJAX=new ActiveXObject("Microsoft.XMLHTTP"); } if (AJAX==null) { alert("Your browser doesn't supportAJAX.");
return false } else { AJAX.open("POST",url,true); AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); AJAX.onreadystatechange = function() { if (AJAX.readyState==4 || AJAX.readyState=="complete"){
alert(AJAX.responseText); var msg=AJAX.responseText; var idary = new Array(); document.getElementById(selId).value = msg; document.getElementById(selId).innerHTML = msg; } } AJAX.send(passData); } } //First Function function showContent(url,arg,opr,sel_id,div_id) {
var postData='';
var formVal=arg.split('|'); if(document.getElementById(div_id))
document.getElementById(div_id).style.display=''; if(document.getElementById(sel_id))
document.getElementById(sel_id).style.display=''; for(i=1;i<=formVal.length;i++) var postData =postData + 'value'+i+'='+escape(formVal[i-1])+'&'; postData=postData + 'opr='+opr; DataByPost(url,sel_id,postData,div_id);
}

Answer 1

I don't know exactly what is going on here without seeing the actual page, but a few things you might try:

1. Use jQuery to do your ajax since you're already using it. It is bug-free and cross platform, and that way you can be sure there are no bugs in the ajax part.

2. I would move the lines "var state = $("#state"); var stateInfo = $("#stateInfo");" inside of the function then declare the function outside of your document.ready block. That way you can be sure that every time the function gets called, it has access to the variables.

3. If your ajax call is replacing the input you're validating, you'll need to re-bind the events each time your ajax call finishes. With jQuery you can do this using the callback parameter.

I'm assuming number 3 is your problem, so try it first.

Answer 2

I hav changed the Function into this

$("#state").blur(function validateStates(){
        //alert("Helo");
        if($("#state").val()== ''){
            $("#state").addClass("error");
            $("#stateInfo").text("Please Select/Enter State");
            $("#stateInfo").addClass("error5");
            return false;
        }else{
            $("#state").removeClass("error");
            $("#stateInfo").text("");
            $("#stateInfo").removeClass("error5");
            return true;
        }
    });

But it still not working.