javascript validation for php form

Question

How can i validate this form before submitting it to php
eg: if i do not enter the name and clicks submitt, the item gets saved in the database

<!DOCTYPE html>
<html>
<head>
	<title>Add Student</title>
</head>
<body  bgcolor="#192C3D" text="white">
<center>
<h2>Enter Student Details</h2><br><br>
<form action="student_add.php" method="post">
	Register no:  
	<input type="text" name="reg_no"><br><br>
	Name:
	<input type="text" name="name"><br><br>
	Gender:
	<input type="radio" name="gender" value="M">Male
	<input type="radio" name="gender" value="F">Female
	<br><br>Group:
	<select name="group" size="1">
		<option value="Computer Science" selected>Computer Science</option>
		<option value="Biology">Biology</option>
		<option value="Commerce">Commerce</option>
		<option value="Humanities">Humanities</option>
	</select><br><br>
	<input type="submit" value="Save">&nbsp
	<input type="reset" value="Clear">
</form>
</center>
</body>
</html>

And this is
student_add.php

<html>
<head><title>Add Student</title></head>
<body  bgcolor="#192C3D" text="white" alink="#75EA7E" vlink="#75EA7E" link="#75EA7E">
<a href="add_student.php"><h3>Add Student</h3></a>
<a href="Show_student.php"><h3>Show Students</h3></a>

<?php

$link = mysqli_connect("localhost", "root", "rootuser", "githin");
 
// Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
 
// Escape user inputs for security
$reg_no = mysqli_real_escape_string($link, $_REQUEST['reg_no']);
$name = mysqli_real_escape_string($link, $_REQUEST['name']);
$gender = mysqli_real_escape_string($link, $_REQUEST['gender']);
$batch = mysqli_real_escape_string($link, $_REQUEST['group']);
 
// attempt insert query execution
$sql = "INSERT INTO student (reg_no, name, gender, batch) VALUES ('$reg_no', '$name', '$gender', '$batch')";
if(mysqli_query($link, $sql)){
    echo '<script language="javascript">';
	echo 'alert("Record Successfully Added")';
	echo '</script>';
} else{
     echo '<script language="javascript">';
	echo 'alert("Record Could NOT be added Successfully" . mysqli_error($link))';
	echo '</script>';
}
 
// close connection
mysqli_close($link);
?>

</body>
</html>

Anyone please help me to validate the above form The name, reg_no and gender fields are mandatory if we try to submit the form without entering the mandatory fields, a javascript alert() should be appeared asking to fill the mandatory fields

WARNING: When using mysqli you should be using parameterized queries and bind_param to add user data to your query. DO NOT use manual escaping and string interpolation or concatenation to accomplish this because you will create severe SQL injection bugs. Accidentally unescaped data is a serious risk. Using bound parameters is less verbose and easier to review to check you’re doing it properly. — tadman
– tadman, Commented May 3, 2017 at 3:31
Best not to rely on form validation which is enforced client-side whether it be via html5 or javascript. Someone could use an older browser, or disable JS (if you have a JS validation schema), or could send a cURL command to your site and bypass your html validation, so you need to take advantage of functions like trim(), empty(), isset(), preg_match(), filter_var(), etc. server-side. Client-side validation is more of a UX feature. — Rasclatt
– Rasclatt, Commented May 3, 2017 at 3:53

Super User · Accepted Answer · 2017-05-03 03:27:57Z

2

You can add html5 validation here, you can find updated code below:

<!DOCTYPE html>
<html>
<head>
	<title>Add Student</title>
</head>
<body  bgcolor="#192C3D" text="white">
<center>
<h2>Enter Student Details</h2><br><br>
<form action="student_add.php" method="post">
	Register no:  
	<input type="number" name="reg_no" required><br><br>
	Name:
	<input type="text" name="name" required><br><br>
	Gender:
	<input type="radio" name="gender" value="M" checked>Male
	<input type="radio" name="gender" value="F">Female
	<br><br>Group:
	<select name="group" size="1"  required>
		<option value="Computer Science" selected>Computer Science</option>
		<option value="Biology">Biology</option>
		<option value="Commerce">Commerce</option>
		<option value="Humanities">Humanities</option>
	</select><br><br>
	<input type="submit" value="Save">&nbsp
	<input type="reset" value="Clear">
</form>
</center>
</body>
</html>

edited May 3, 2017 at 3:27

answered May 3, 2017 at 3:22

Super User

9,6623 gold badges34 silver badges48 bronze badges

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

6 Comments

Githin Manesh Over a year ago

thank you. Can u please help me to accept only numerical values to reg_no

Githin Manesh Over a year ago

Can u please help me to accept only numerical values to reg_no

Super User Over a year ago

just add type="number" instead of type="text"

Chinito Over a year ago

you can also use this in your input tag required onkeypress='return event.charCode >= 48 && event.charCode <= 57' to get rid of the arrow buttons

Githin Manesh Over a year ago

can you please help to avoid -ve integers

|

YATO · Accepted Answer · 2017-05-03 03:32:06Z

0

If you are looking for a versatile plugin for validation you may use http://1000hz.github.io/bootstrap-validator/ . Using this plugin is safer than using HTML5 validation.

answered May 3, 2017 at 3:32

YATO

10714 bronze badges

Collectives™ on Stack Overflow

javascript validation for php form

student_add.php

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

student_add.php

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related