How to send data to php after validating information on a javascript file

I heard of Ajax/XMLhttprequest but im not quite sure if thats what I need to transfer the data from a javascript variable to php.

The webpage is basicly a contact us page, where customers enter they information plus email, javascript check whether input was enter and validates if email has a @. if everything is fine then customers will be able to submit the form and an email should be delivery to me.

I got two things working, 1 I can get the php file to send an email to me but then I would have to ignore the javascript validation. 2 I can get javacript validation working but then php file wont work as I cant transfer the data. I know javascript execute in the client side and php in the server side, which is why i think i need to validate information in the client side before sending information to server.

HTML

       <form id="uDF" method="post" onsubmit="submitValidation()">
            <input name="uDFName" type="text" id="fName" placeholder="Name"><br>
            <input name="uDFNumber" type="text" id="phone" placeholder="Mobile/Phone Line"><br>
            <input name="uDFEmail" type="text" id="email" placeholder="Email"><br>
            <input name="uDFSubject" type="text" id="subject" placeholder="Subject"><br>
            <textarea name="uDFMessage" placeholder="Message......"></textarea><br>
            <input type="submit" name="uDFButton" value="Submit" class="btnSubmit" id="test">
        </form>

Javascript

function submitValidation(){
var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value,
document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value,
document.forms ["uDF"] ["uDFMessage"].value,]

var char = ''; // variable used to check whether email has @
var x;
var isEmail = false;
var isNotEmpty = false;

//for loop checks email for @ char
for(x = 0; x<data[2].length;x++)
{
    char = data[2].charAt(x);
    if(char === "@"){
        isEmail = true;
        break;
    }
}

var i;

//for loop check if data is collected
for(i=0;i < 5;i++){
    if(data[i] === ""){
        isNotEmpty = false;
    }else{
        isNotEmpty = true;
    }
}
if(isEmail === true && isNotEmpty === true)
{
    THIS IS WHERE I SHOULD TRANSFER THE DATA TO PHP
}else if (!isNotEmpty){
    alert('Empty fields');
}else if(!isEmail){
    alert("Please enter valid email!");
}
}

PHP

<?php
$uDFName = $_POST['uDFName'];
$uDFNumber = $_POST['uDFNumber'];
$uDFEmail = $_POST['uDFEmail'];
$uDFSubject = $_POST['uDFSubject'];
$uDFMessage = $uDFName . "rn" . $uDFNumber . "rn" . "";

// In case any of our lines are larger than 70 characters, we should use 
wordwrap()
$message = wordwrap($message, 70, "rn");
mail($uDFEmail, $uDFSubject, $uDFMessage);

PHP works if I put it on the form as action=(“mail.php) but then ofcourse no validation will be done.

Answer

After your validation finished

You can try like this

It will work like this.

After validation it will call external php file. it will send your all input type form data in that php file with this $('#yourform').serialize().

and you can get that input form data in your php file like this $name = $_POST['name'];

This will work same as the conventional php GET and POST but here concept is without page loading.

Hope you can understand Now.

function submitValidation(){ 

var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value, document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value, document.forms ["uDF"] ["uDFMessage"].value,];

var char = ''; // variable used to check whether email has @
var x;
var isEmail = false;
var isNotEmpty = false;

//for loop checks email for @ char
for(x = 0; x<data[2].length;x++)
{
    char = data[2].charAt(x);
    if(char === "@"){
        isEmail = true;
        break;
    }
}

var i;

//for loop check if data is collected
for(i=0;i < 5;i++){
    if(data[i] === ""){
        isNotEmpty = false;
    }else{
        isNotEmpty = true;
    }
}
if(isEmail === true && isNotEmpty === true)
{
    THIS IS WHERE I SHOULD TRANSFER THE DATA TO PHP
     /**** Your Ajax ****/
    $.ajax(
    {
       url: 'yourphpfile.php',
       type: 'post',
       data: $("#uDF").serialize(),
       success: function(response) {
         console.log(response);
       }
    });
   return false;


}else if (!isNotEmpty){
    alert('Empty fields');
    return false;
}else if(!isEmail){
    alert("Please enter valid email!");
    return false;
}



}