php: how to validate textbox using jquery ajax

Question

I have a textbox, i would like to validate it using jquery-ajax once user focusout from that textbox.

Validation include:

Server side, value goes to the php page and i have to validate it
if validation success,show alert("succes"); else if error alert("failed");

I have doubt how jquery ajax will show alert("failure"); Till now , i have only done for success.

I know only the below mention code,furthure what should i do to solve my problem? please help

<script type="text/javascript">
    $(function()
    {
        $('input[id^="datepicker"]').on('focusout',function()
        { 
             $.ajax({
                url: "ajax_frmdate_validation.php?txtval="+$(this).val(),
                success: function(data){
                    alert('Successfully  ...');
                }
            });

        });
    });
</script>

--------------
--------------
<input class="plain" name="frmdate"   value="" size="25" id="datepicker" />

And my server side php code is:

$txtval =$_REQUEST['txtval'];
$fromTimestamp = strtotime( $txtval); 
//---------My Logic Code Goes Here -----------------------------
$sid=$_SESSION['id'];
$result12=mysql_query("SELECT * FROM budget where creater_id = '$sid'");
$num_rows = mysql_num_rows($result12);

if($num_rows>0)//check if empty or not
{
    while($test12 = mysql_fetch_array($result12)) {
        $from_date = strtotime($test12['from_date']);//getting all the FROM-Dates_column
        $to_date = strtotime($test12['to_date']);//getting all the TO-Dates_column

        if(isset($to_date) && isset($from_date)) {
            if((($fromTimestamp >= $from_date) && ($fromTimestamp <= $to_date)) || (($toTimestamp >= $from_date) && ($toTimestamp <= $to_date))) {
                $val = 'Y'; //return Y in meet this condition
            }
            else {
                $val = 'N'; // return N if meet this condition
            }
        }
        //---------------------Result of my logic code---------------------------------
        if($val == 'Y') //Returns TRUE
        {
            //VALIDATION FAILS - Returns Validation Error
            break;
        }
        else  if($val == 'N') {
            //VALIDATION TRUE - Returns Validation Error
        }
    }
}

just return the error message from the server and alert it in the success function — Sabari
– Sabari, Commented Apr 9, 2013 at 7:19
@Sabari please post it as an answer with few code as reference — user2180861
– user2180861, Commented Apr 9, 2013 at 7:22
Just offtopic. But escape this query $result12=mysql_query("SELECT * FROM budget where creater_id = '$sid'"); at least with mysql_real_escape_string() — S.Visser
– S.Visser, Commented Apr 9, 2013 at 7:24

dzbo · Accepted Answer · 2013-04-09 07:23:16Z

1

Change

if($val == 'Y') //Returns TRUE
{
    //VALIDATION FAILS - Returns Validation Error
    break;
}
else  if($val == 'N') {
    //VALIDATION TRUE - Returns Validation Error
}

into

echo $val;

Then in your js simply grab response and do alert msg:

success: function(data){
    if (data == 'Y') {
        alert('Successfully  ...');
    } else {
        alert('Oh no...');
    }
}

answered Apr 9, 2013 at 7:23

dzbo

1,1537 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sabari · Accepted Answer · 2013-04-09 10:19:23Z

0

You can do this way:

$txtval = mysql_real_escape_string($_REQUEST['txtval']);
$fromTimestamp = strtotime( $txtval); 
 //---------My Logic Code Goes Here -----------------------------
 $sid=$_SESSION['id'];
 $result12=mysql_query("SELECT * FROM budget where creater_id = '$sid'");
 $num_rows = mysql_num_rows($result12);

 if($num_rows>0)//check if empty or not
 {
    while($test12 = mysql_fetch_array($result12)) {
    $from_date = strtotime($test12['from_date']);//getting all the FROM-Dates_column
    $to_date = strtotime($test12['to_date']);//getting all the TO-Dates_column

    if(isset($to_date) && isset($from_date)) {
         if((($fromTimestamp >= $from_date) && ($fromTimestamp <= $to_date)) || (($toTimestamp >= $from_date) && ($toTimestamp <= $to_date))) {
             $val = 'Y'; //return Y in meet this condition
         }
         else {
            $val = 'N'; // return N if meet this condition
         }
     }
     //---------------------Result of my logic code---------------------------------
     if($val == 'Y') //Returns TRUE
     {
        echo "failed";
        exit();
     }
     else  if($val == 'N') 
     {
        echo "success";
        exit();
     }

Now in your ajax call:

<script type="text/javascript">
    $(function()
    {
       $('input[id^="datepicker"]').on('focusout',function()
       { 
         $.ajax({
            url: "ajax_frmdate_validation.php?txtval="+$(this).val(),
            success: function(data){
               if (data == 'success') {
                    alert("Successfully validated"); 
               } else {
                    alert("Failed");
                    return false;
               }
            }
        });

      });
   });
</script>

Rather than alerting, a better way will be to show the error message below the textbox by appending the message if it is failed.

Also do proper escaping before you do the checking using mysql_real_escape_string

UPDATE :

You need to call the ajax whenever the date changes in the input text field, so instead of focusout you can use onSelect from datepicker. So when a new date is selected an ajax call will be initiated.

So instead of calling the earlier ajax on focusout you can call on onSelect of datepicker

$(function(){
    $('#datepicker').datepicker({
        onSelect:function(date,instance){
           $.ajax({
              url: "ajax_frmdate_validation.php?txtval="+date,
              success: function(data){
                 if (data == 'success') {
                    alert("Successfully validated"); 
                 } else {
                    alert("Failed");
                    return false;
                 }
              }
           });
        }
    });
});

NEW UPDATE

Try with this :

 <script type="text/javascript">
     $(document).ready(function() { 
       $("#datepicker").datepicker({ 
          dateFormat: "yy-mm-dd" ,
          onSelect:function(date,instance){
                          $.ajax({
                            url: "ajax_frmdate_validation.php?txtval="+date,
                            success: function(data){
                            if (data == 'success') {
                                 alert("Successfully validated"); 
                            } else {
                                 alert("Failed");
                                  return false;
                            }
                     }
                 });
            }
     }); 
  }); 
 </script>

edited Apr 9, 2013 at 10:19

answered Apr 9, 2013 at 7:23

Sabari

6,3551 gold badge29 silver badges36 bronze badges

18 Comments

user2180861 Over a year ago

Above i shown you event focusout . And ,my textbox is getting input from calender(jquery calender opens when user focus on the textbox) . So according to my requirement which event of jquery is suitable for this?

Sabari Over a year ago

@user2180861 I am not clear of what you mean. The event focusout you have used for the text box is correct for your requirement

user2180861 Over a year ago

I have a text-box , when i click on it. One j-query Calender is opening . so for this case i used focusout event. But focusout is not seems good . Can you suggest which event shall i use for this case??

Sabari Over a year ago

@user2180861 Please check my update. Hope this is what you need

Sabari Over a year ago

@user2180861 what is the response from the server. Use firebug to check for the ajax call

|

techie_28 · Accepted Answer · 2013-04-09 07:22:04Z

0

its easy use

 if($val == 'Y') //Returns TRUE
            {
                echo 'success';
            }
            else  if($val == 'N') {
                echo 'fail';
            }exit;

you will get this success/fail in the data param of your success call back.

answered Apr 9, 2013 at 7:22

techie_28

2,1454 gold badges44 silver badges65 bronze badges

Comments

Suresh Kamrushi · Accepted Answer · 2013-04-09 07:22:32Z

Your php code will be

if($val == 'Y') //Returns TRUE
            {
              echo "Success";   
             //VALIDATION FAILS - Returns Validation Error
                break;
            }
            else  if($val == 'N') {
              echo "Fail";   
                //VALIDATION TRUE - Returns Validation Error
            }

And In JS

$.ajax({
                           url: "ajax_frmdate_validation.php?txtval="+$(this).val(),
                           success: function(data){
                                      if(data == "Success")
                                        alert("success");
                                      if(data == "Fail")
                                        alert("Fail");

                           }
                         });

Tito · Accepted Answer · 2013-04-09 07:23:14Z

0

Until and unless you set the HTTP Response as an error code , ajax will not callback to fail: function.

An easy way to do is , send a JSON string back from the server side even if validation fails or is a success as shown in the format below.

If validation is a success

 {'status':'OK','message':'Validation success'}

If validation is a failure

{'status':'NOK','message':'Please enter your name'}

Now you can get this JSON string in the success callback and take appropriate action.

answered Apr 9, 2013 at 7:23

Tito

9,07413 gold badges56 silver badges88 bronze badges

Comments

bipen · Accepted Answer · 2013-04-09 07:23:18Z

0

you can use ajax type and data option to send the data instead of passing it through url.

 $.ajax({
           url: "ajax_frmdate_validation.php",
           type:'GET',
           data:{"txtval":$(this).val()},
           success: function(data){
                 if(data=="success"){
                   alert('successful');
                 }else{
                    alert('error');
                 }
            }
         });

and you serverside code include this

  if($val == 'Y') //Returns TRUE
        {
           echo "success"
            break;
        }
        else  if($val == 'N') {
             echo "error";
             break;
        }

answered Apr 9, 2013 at 7:23

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

php: how to validate textbox using jquery ajax

6 Answers 6

Comments

18 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

18 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related