Registration Validation in PHP, with Javascript alert boxes - php

Question

I wanted to create a registration validation system (to make sure that the user registered has valid info) with PHP and Javascript Alert Boxes. Each time a user does not do a field correctly, I want him to get an alert box saying that it is incorrect. So here it is:
Code #1 - For generating alerts in PHP (This is for the event in the button).
function alert($string)
{
echo "javascript:alert('$string');";
}
Code #2 - PHP placed inside the onclick="" attribute for the submit button.
if (!isset($fname) || empty($fname))
{
alert('Please enter your first name!');
}
elseif (!isset($lname) || empty($lname))
{
alert('Please enter your last name!');
}
elseif (!isset($gender) || empty($gender))
{
alert('Please specify your gender!');
}
elseif (!isset($phone) || empty($phone) || strlen($phone) != 10)
{
alert('Please enter your correct Phone Number!');
}
elseif (!isset($user) || empty($user) || strlen($user) > 10 || strlen($user) < 5)
{
alert('Please enter a Username that is 5-10 characters long!');
}
elseif (!isset($pass) || empty($pass) || strlen($pass) > 10 || strlen($pass) < 5)
{
alert('Please enter a Password that is 5-10 characters long!');
}
elseif (!isset($repass) || empty($repass) || $pass != $repass)
{
alert('Please repeat your Password');
}
else
{
$query = mysql_query($query_send_form);
query_error($query);
}
As you have probably realised, the variables are actually equal to the $_POST values of the field in the form.
So the problem is that the onclick of the button is ALWAYS equal to onclick="
javascript:alert('Please enter your first name!');" It wouldn't change.
Please don't give me a complete javascript alternative to the system, I want to learn PHP for now.
Thanks for your help in advance.
EDIT #1
An important thing I forgot to mention was that the form target is just an iframe on the same page, so that the content the user has entered stays while he is being shown the error.
<form method="post" target="frame" action="register.php">
register.php is the same page where the form HTML and the validation PHP is.
EDIT #2
The data is being posted. Here are the declared varibles:
#$fname = $_POST['fname'];
#$lname = $_POST['lname'];
#$gender = $_POST['gender'];
#$phone = $_POST['phone'];
#$user = $_POST['user'];
#$pass = $_POST['pass'];
#$repass = $_POST['repass'];

Answer 1

You really shouldn't do that kind of validation like that...
Anytime you want to tell the user something is invalid because of logic rules, it is done with javascript on the front side. There are some good plugins out there written in either jquery or javascript out here. You can also make something simple on your own. This helps the user because then they don't have to submit the page to find out that their password isn't long enough.
You still need to do validation after POST and before putting things in the database because of sql injection. That kind of validation is a little different because you're just looking for things that are harmful.
This example is self-contained. The messages go to a div instead of alerts.
<?php
$message = "";
$submit = (isset($_POST['submit'])) ? $_POST['submit'] : '';
if (!empty($submit)) {
$message = "thanks for submitting the form!";
}
?><div id="errors"><?php echo $message ?></div>
<form id="my_form" name="my_form" action="" method="post">
<div style="display:inline-block;">Name<br/>
<input name="first_name" type="text" size=8 class="required"/>
<input name="last_name" type="text" size=16 class="required"/>
</div>
<div style="display:inline-block;">Gender<br/>
<select name="gender" class="required">
<option value=''></option>
<option value='M'>M</option>
<option value='F'>F</option>
</select>
</div>
<div style="display:inline-block;">Phone Number<br/><input name="phone" type="text" class="required"/></div><br/>
<div style="display:inline-block;">Username<br/><input name="username" type="text" class="required"/></div><br/>
<div style="display:inline-block;">Password<br/><input name="password" type="password" class="required"/></div>
<div style="display:inline-block;">Repeat Password<br/><input name="repeat_password" type="password" class="required"/></div><br/>
<div style="display:inline-block;">Description<br/><textarea name="description"></textarea></div><br/>
<button type="submit">Submit</button>
<input type="hidden" name="submit" value="submit"/>
</form>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style> .invalid {border-color:red}</style>
<script>
$(document).ready(function(){
$("#my_form").submit(function(e){
var messages = perform_validation();
if (messages.length!==0) {
$("#errors").empty();
$.each(messages,function(i,msg){
$("#errors").append(msg+"<br/>");
});
e.preventDefault();
return false;
}
// else continue to submit form normally
});
function perform_validation()
{
var messages = [];
$("#my_form :input.required").removeClass("invalid");
$("#my_form :input.required").each(function(){
if ($(this).val().length===0) {
$(this).addClass("invalid");
var name = $(this).attr('name').replace('_',' ');
messages.push("Please provide a "+name+".");
}
});
var password = $("input[name='password']").val();
if (!(password.length>=5 && password.length<=10)) {
messages.push("Password length must be between 5 and 10 characters.");
}
else {
if (password!=$("input[name='repeat_password']").val()) {
messages.push("Repeat password doesn't match first password.");
}
}
return messages;
}
});
</script>

Answer 2

Unless you have magic quotes turned on (and I hope you don't), your values such as $fname will always be undefined. You probably want to replace those with $_POST['fname'].
On a side note, you can use just empty() without !isset() since empty() will return FALSE if the value is not set.