Ajax Form Validation With PHP

Spectracus · 2025-02-27T05:13:02+0000

In this tutorial we will create a Ajax Form Validation With PHP. AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications. We will try to merge PHP as a serve side scripting for responding the request of the web browser. So let's see now.

Creating A Database
To create database, start by opening any kind of web server(wamp, xamp, etc...). After that go to phpmyadmin then click create database, and name the database as 'db_user'. Then after that click SQL, and copy/paste the code below then run the SQL statement.

CREATE

TABLE

`user`

(
`userid`

int

(

11

)

NOT

NULL

AUTO_INCREMENT

,
`username`

varchar

(

30

)

NOT

NULL

,
`password`

varchar

(

30

)

NOT

NULL

,
`firstname`

varchar

(

50

)

NOT

NULL

,
`lastname`

varchar

(

50

)

NOT

NULL

,
`email`

varchar

(

100

)

NOT

NULL
PRIMARY KEY

(

`userid`

)
)

ENGINE

=

InnoDB

DEFAULT

CHARSET

=

latin1;

Creating A Form
To do that copy/paste the code below, then name it 'index.php'

<!

DOCTYPE html>
<

html lang =

"en"

>
<

head>
<

meta charset =

"UTF-8"

name =

"viewport"

content =

"width=device-width, initial-scale=1"

/>
<

link

rel =

"stylesheet"

type =

"text/css"

href =

"css/bootstrap.css"

/>
<

script src=

"js/ajax.js"

>

</script>
</

head>
<

body>
<

nav class

=

"navbar navbar-default"

>
<

div class

=

"container-fluid"

>
<

a class

=

"navbar-brand"

href =

"https://sourcecodester.com"

>

Sourcecodester</

a>
</

div>
</

nav>
<

div class

=

"row"

>
<

div class

=

"col-md-4"

></

div>
<

div class

=

"col-md-4 well"

>
<

h3 class

=

"text-primary"

>

Ajax Form Validation With PHP</

h3>
<

hr style =

"border-top:1px solid #000;"

/>
<

form action =

"query.php"

method =

"POST"

id =

"regForm"

>
<

div class

=

"form-group"

>
<

label>

Username</

label>
<

input id=

'username'

class

=

"form-control"

name=

'username'

onblur=

"validate('username_result', this.value)"

type=

'text'

/>
<

center><

div id=

'username_result'

class

=

"text-danger"

></

div><

center>
</

div>
<

div class

=

"form-group"

>
<

label>

Password</

label>
<

input id=

'password'

class

=

"form-control"

name=

'password'

onblur=

"validate('password_result', this.value)"

type=

'password'

/>
<

center><

div id=

'password_result'

class

=

"text-danger"

></

div></

center>
</

div>
<

div class

=

"form-group"

>
<

label>

Firstname</

label>
<

input id=

'firstname'

class

=

"form-control"

name=

'firstname'

onblur=

"validate('firstname_result', this.value)"

type=

'text'

/>
<

center><

div id=

'firstname_result'

class

=

"text-danger"

></

div></

center>
</

div>
<

div class

=

"form-group"

>
<

label>

Lastname</

label>
<

input id=

'lastname'

class

=

"form-control"

name=

'lastname'

onblur=

"validate('lastname_result', this.value)"

type=

'text'

/>
<

center><

div id=

'lastname_result'

class

=

"text-danger"

></

div></

center>
</

div>
<

div class

=

"form-group"

>
<

label>

Email</

label>
<

input id=

'email'

class

=

"form-control"

name=

'email'

onblur=

"validate('email_result', this.value)"

type=

'text'

/>
<

center><

div id=

'email_result'

class

=

"text-danger"

></

div><

center>
</

div>
<

div class

=

"form-group"

>
<

button class

=

"btn btn-primary form-control"

onclick=

"validForm()"

name =

"save"

type=

'button'

><

span class

=

"glyphicon glyphicon-save"

></

span>

Submit</

button>
</

div>
</

form>
</

div>
</

div>
</

body>
</

html>

The code above will display the fill up form for the user.

Creating Ajax Script
To create this script, copy/paste the code below and name it 'ajax.js'.

function

validForm(

)

{
var

name =

document.getElementById

(

"username"

)

.value

;
var

password =

document.getElementById

(

"password"

)

.value

;
var

firstname =

document.getElementById

(

"firstname"

)

.value

;
var

lastname =

document.getElementById

(

"lastname"

)

.value

;
var

email =

document.getElementById

(

"email"

)

.value

;
if

(

name ==

''

||

password ==

''

||

firstname ==

''

||

lastname ==

''

||

email ==

''

)

{
alert(

"Complete all the required fields"

)

;
}

else

{
var

username1 =

document.getElementById

(

"username_result"

)

;
var

password1 =

document.getElementById

(

"password_result"

)

;
var

firstname1 =

document.getElementById

(

"firstname_result"

)

;
var

lastname1 =

document.getElementById

(

"lastname_result"

)

;
var

email1 =

document.getElementById

(

"email_result"

)

;
if

(

username1.innerHTML

==

'Must be 4+ letters'

||

password1.innerHTML

==

'Password too short'

||

firstname1.innerHTML

==

'Invalid'

||

lastname1.innerHTML

==

'Invalid'

||

email1.innerHTML

==

'Invalid email'

)

{
alert(

"Complete valid information"

)

;
}

else

{
document.getElementById

(

"regForm"

)

.submit

(

)

;
}
}
}
function

validate(

field,

value)

{
var

xmlhttp;
if

(

window.XMLHttpRequest

)

{
xmlhttp =

new

XMLHttpRequest(

)

;
}

else

{
xmlhttp =

new

ActiveXObject(

"Microsoft.XMLHTTP"

)

;
}
xmlhttp.onreadystatechange

=

function

(

)

{
if

(

xmlhttp.readyState

!=

4

&&

xmlhttp.status

==

200

)

{
document.getElementById

(

field)

.innerHTML

=

"Validating.."

;
}

else

if

(

xmlhttp.readyState

==

4

&&

xmlhttp.status

==

200

)

{
document.getElementById

(

field)

.innerHTML

=

xmlhttp.responseText

;
}

else

{
document.getElementById

(

field)

.innerHTML

=

"Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page."

;
}
}
xmlhttp.open

(

"GET"

,

"validation.php?field="

+

field +

"&value="

+

value,

true

)

;
xmlhttp.send

(

)

;
}

The code above will validate the input value of the user. The xmlhttp.open response to the server to fetch the data and validate if it is valid or invalid.

Creating Validation
This is where the warning message will show if the information is valid.

<?php
$val

=

$_GET

[

'value'

]

;
$field

=

$_GET

[

'field'

]

;
if

(

$field

==

"username_result"

)

{
if

(

strlen

(

$val

)

<

5

)

{
echo

'Must be 4+ letters'

;
}

else

{
echo

'<label class = "text-success">Valid</label>'

;
}
}
if

(

$field

==

"password_result"

)

{
if

(

strlen

(

$val

)

<

6

)

{
echo

'Password too short'

;
}

else

{
echo

'<label class = "text-success">Strong</label>'

;
}
}
if

(

$field

==

"firstname_result"

)

{
if

(

strlen

(

$val

)

<

2

)

{
echo

'Invalid'

;
}

else

{
echo

'<label class = "text-success">Valid</label>'

;
}
}
if

(

$field

==

"lastname_result"

)

{
if

(

strlen

(

$val

)

<

2

)

{
echo

'Invalid'

;
}

else

{
echo

'<label class = "text-success">Valid</label>'

;
}
}
if

(

$field

==

"email_result"

)

{
if

(

!

preg_match

(

"/([\w\-]+\@[\w\-]+\.[\w\-]+)/"

,

$val

)

)

{
echo

'Invalid email'

;
}

else

{
echo

'<label class = "text-success">Valid</label>'

;
}
}
?>

The code above will response to ajax and validate if the data meet the following requirements.

Creating The Query
This is where the data will be stored and then be send to the database server.

<?php
$conn

=

new

mysqli(

"localhost"

,

"root"

,

""

,

"db_user"

)

or die

(

mysqli_error

(

)

)

;
$username

=

$_POST

[

'username'

]

;
$password

=

$_POST

[

'password'

]

;
$firstname

=

$_POST

[

'firstname'

]

;
$lastname

=

$_POST

[

'lastname'

]

;
$email

=

$_POST

[

'email'

]

;
$stmt

=

$conn

->

prepare

(

"INSERT INTO `user` (username, password, firstname, lastname, email) VALUES(?, ?, ?, ?, ?)"

)

;
$stmt

->

bind_param

(

"sssss"

,

$username

,

$password

,

$firstname

,

$lastname

,

$email

)

;
if

(

$stmt

->

execute

(

)

)

{
$stmt

->

close

(

)

;
$conn

->

close

(

)

;
echo

"<script>alert('Successfully Saved Records')</script>"

;
echo

"<script>window.location = 'index.php'</script>"

;
}
?>

The code above will store the value of the input into variable and then will be send to the database server.

There you have it we created a ajax form validation with php. I hope that this tutorial give you some thoughts on how to implement ajax in your websites. For more updates and tutorials just kindly visit this site, don't forget to LIKE & SHARE. Enjoy Coding!!

Download

You must upgrade your account or reply in the thread to view hidden text.

Ajax Form Validation With PHP

More options

Spectracus

449,193

322,229

322,238