jQuery Ajax POST and return data

Question

I have a form with AJAX submit.

This form is working, but I have the impression that the functions are not correct.

jQuery(document).ready(function(){
    var myForm = $("#ajax_form"), email = $("#email"), emailInfo = $("#emailInfo"), ck1 = $("#ck1"), ck2 = $("#ck2"), ck3 = $("#ck3");
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();
        jQuery.ajax({
            type: "POST",
            url: "check.php", // Checking data
            data: dados,
            beforeSend: function(){
                emailInfo.html("<font color='blue'>Checking..</font>");
                if(dados == "email=") // >>> This field, how to check if the field is blank?
                {
                    email.focus();
                    emailInfo.html("<font color='red'>Required.</font>");
                    return false;
                }
            },
            success: function(data){
            if(data == "invalid")
            {
                emailInfo.html("<font color='red'>Invalid.</font>");
            }
            else if(data != "0")
            {
                email.val(data); // This field, how to display the data sent in the email field? not the return of PHP,
                ck1.css("display", "none");
                ck2.css("display", "inline");
            }
            else
            {
                ck1.css("display", "none");
                ck2.css("display", "none");
                ck3.css("display", "inline");
            }
        }
        });

        return false;
    });
});

I think that has a lot of wrong code, for example:

if(dados == "email=") // >>> This field, how to check if the field is blank?

and >>

email.val(data); // This field, how to display the data sent in the email field? not the return of PHP,

I tried to update but not return any results

Test Code

                    //if (email.val() == "")
                //{
                    //email.focus();
                    alert(email.val()); // op1
                    alert(dados); // op2
                    alert($.trim($('email').val())); // op3
                    emailInfo.html("<font color='red'>Required.</font>");
                    return false;
                //}

if insert an email, the only option that returns is op2 email=teste@teste.com

Answer 1

I think your code is trying to validate email by ajax before submitting form. If so this code seems ok to me out of a few points.

return false at the end of submit call may not work on firefox. Use e.preventDefault(); . Look at this post. If you try this code on chrome it may fail beacuse you have no return true anywhere.

Your second code block is ok. email.val(data); is equal to $("#email").val(data); . I think you are trying to set the email input value to the result.

if(dados == "email=") can be changed to if (email.val() != '') . So you wont need to dados also.

You don't use myForm variable nowhere. It should be deleted.

If validating the email on server side is not a must think about validating on client side.

Answer 2

The returned data value is echoed from your PHP file. There are two approaches to take to validate your data:

1. Do it in the frontend with JS prior to sending your form.

2. Do it with your PHP code in the separate file.

    email.val(data); // This field, how to display the data sent in the email field? not the return of PHP 

   I am guessing that you want to ensure that the value doesn't get deleted if the user sends an invalid request (thus having to type the value in again).

What you can do is store the values of what the user has entered on form submit but prior to sending the AJAX request: var emailVal = email.val();

jQuery(document).ready(function(){
var myForm = $("#ajax_form"), email = $("#email"), emailInfo = $("#emailInfo"), ck1 = $("#ck1"), ck2 = $("#ck2"), ck3 = $("#ck3");
jQuery('#ajax_form').submit(function(){
    var dados = jQuery( this ).serialize();

    var emailVal = email.val(); // Assign the entered input to an emailVal variable

    jQuery.ajax({
        type: "POST",
        url: "check.php", // Checking data
        data: dados,
        beforeSend: function(){
            emailInfo.html("<font color='blue'>Checking..</font>");
            if(dados == "email=") // >>> This field, how to check if the field is blank?
            {
                email.focus();
                emailInfo.html("<font color='red'>Required.</font>");
                return false;
            }
        },
        success: function(data){
        if(data == "invalid")
        {
            emailInfo.html("<font color='red'>Invalid.</font>");
        }
        else if(data != "0")
        {

            email.val(emailVal); // Store the entered value back into the email input

            ck1.css("display", "none");
            ck2.css("display", "inline");
        }
        else
        {
            ck1.css("display", "none");
            ck2.css("display", "none");
            ck3.css("display", "inline");
        }
    }
    });

    return false;
  });
});

Another Note

I would also like to point out this: if(data == "invalid")

I have found that PHP can send back error messages within the data along with whatever you ask it to return. If you have any error in your PHP code, this will never hit because invalid will never be the only string of characters in the returned data value. To protect yourself, I would do either two things:

1. Return an HTTP error and do error handling within the error callback of the AJAX function: https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
2. Return a unique word and search for that word within the returned data string:

PHP

if(!validEmailCheck($email)){
   echo('invalidRAWR');
}

JS

if(data.indexOf('invalidRAWR') != -1)  // Built in PHP errors will never return 'invalidRAWR'