Forms Validation

[smithmr8]

Hi,

I'm currently working on a new project [Assignment for college]. I have a registration form, and I would greatly appreciate some.

 

At the moment, when data is submitted, it has to be sent and then checked by the action script to make sure every field was filled. Then, it has to tell the user, and they would have to enter it all over again.

 

I would like something so:

When the field has had data entered into it, an image of a green tick shows at the side of it. If it hasn't got anything in it, a red tick shows next to it. And, if possible, when they press the submit button, it doesn't send the form but tells them there is outstanding fields and allows them to change it without having to enter everything again.

[budimir]

You will need to use Javascript or AJAX.

 

Try to google for "javascript form validation".

[Maq]

At the moment, when data is submitted, it has to be sent and then checked by the action script to make sure every field was filled. Then, it has to tell the user, and they would have to enter it all over again.

 

If I were you I would submit the form to itself so you can repopulate the fields and make everything easier for the user and yourself.  Like this:

 

</pre>
<form name="form_name" method="post" action="<?php%20echo%20%24_SERVER%5B'PHP_SELF'%5D;%20?>"> <

 

But it should be checked client and server side.  This is actually pretty simple.  Do you have anything done yet?

[.josh]

Looks like you have a plan for what you need to do.  Break it down, research one thing at a time.  When writing your code, if you encounter some kind of issue, post the code, and we will be more than happy to help find the bug.  But we aren't here to write your scripts for you, especially when it's you're homework; that defeats the purpose of learning. 

[smithmr8]

I've never sent a form to itself before. Sounds like a useful thing, but I've not come across it before [amazingly]. I wouldn't know how to do it.

 

http://www.bytefish.co.uk/computing/

 

User: test

Pass: test

Acc Type: admin

 

The form is 'Add Student'

 

 

[Maq]

It's the same as submitting to another page except it's itself because PHP is server side.  I gave you the code to submit to itself.

 

http://www.bytefish.co.uk/computing/

 

User: test

Pass: test

Acc Type: admin

 

The form is 'Add Student'

 

What is this for?!

[smithmr8]

Never mind, had a severely slow moment.

 

The form submits to itself, fair enough. But how would I go about running the script I would have run to insert the data ?

[smithmr8]

Looks like you have a plan for what you need to do.  Break it down, research one thing at a time.  When writing your code, if you encounter some kind of issue, post the code, and we will be more than happy to help find the bug.  But we aren't here to write your scripts for you, especially when it's you're homework; that defeats the purpose of learning. 

 

You misunderstood. I don't want someone to write the code for me. I'm just venturing into some things which I haven't really touched before. I'm just looking fora point in the right direction . Writing your own scripts, and experimenting is one of, if not the, funnest part of any web development. Seeing what you can come up with and create.

[Maq]

But how would I go about running the script I would have run to insert the data ?

 

Sorry, I don't even understand what you're saying here.  But I can guess.  One of your text fields is for the user name:

 

 

After you submit that to the same page you can use:

$_POST['myusername'];

 

to get what the user filled in for the user name.  Then you need to use Javascript to check this information.

 

OR

 

You can use AJAX which looks better because the page does not refresh and you still get the same result.  Make sense?

 

[smithmr8]

Oh.. Now that makes sense.

[Maq]

The only way to learn is to do it yourself.  Everyone here is willing to help.  So try it post your code and we'll get this done.

[smithmr8]

I can do quite a lot, when it comes to using PHP. But I'm still a novice at javascript. Never really ventured into it.

 

I've got the self-submitting working, and I'm putting in the Red/Green ticks & messages now.

[smithmr8]

When I submit the form, even if all fields are full, it doesn't add it to the DB.

 

$t = mysql_query("SELECT * FROM `teacher` ORDER BY ID DESC");
$s = mysql_query("SELECT * FROM `school` ORDER BY ID DESC");
echo "<form method=\"POST\" name=\"form\" id=\"form\"".$_SERVER['PHP_SELF']." style=\"margin-left: 5px; margin-right: 5px\">";
echo "<font size=2>Forename*<br> <input type=\"text\" size=\"20\" name=\"forename\" id=\"forename\" value=\"".$_POST['forename']."\">";
if($_POST['forename'] == ""){ echo " <img src=\"/computing/images/error_bang.gif\" border=\"0\"> <font size=\"1\" color=\"FF0000\">Forename Required</font>"; } else { echo " <img src=\"/computing/images/checkbullet.gif\" border=\"0\"> <font size=\"1\" color=\"4bed10\">Forename Entered</font>"; }
echo "<br>";
echo "<font size=2>Surname*<br> <input type=\"text\" size=\"20\" name=\"surname\" id=\"surname\" value=\"".$_POST['surname']."\">";
if($_POST['surname'] == ""){ echo " <img src=\"/computing/images/error_bang.gif\" border=\"0\"> <font size=\"1\" color=\"FF0000\">Surname Required</font>"; } else { echo " <img src=\"/computing/images/checkbullet.gif\" border=\"0\"> <font size=\"1\" color=\"4bed10\">Surname Entered</font>"; }
echo "<br>";
echo "<font size=2>Username*<br> <input type=\"text\" size=\"20\" name=\"username\" id=\"username\" value=\"".$_POST['username']."\">";
if($_POST['username'] == ""){ echo " <img src=\"/computing/images/error_bang.gif\" border=\"0\"> <font size=\"1\" color=\"FF0000\">Username Required</font>"; } else { echo " <img src=\"/computing/images/checkbullet.gif\" border=\"0\"> <font size=\"1\" color=\"4bed10\">Username Entered</font>"; }
echo "<br>";
echo "<font size=2>Password*<br> <input type=\"password\" size=\"20\" name=\"password\" id=\"password\">"; 
echo " <img src=\"/computing/images/error_bang.gif\" border=\"0\"> <font size=\"1\" color=\"FF0000\">Password Required</font>";
echo "<br>";
echo "<font size=2>Teacher*<br></font> <select name=\"teacher\" size=\"1\" id=\"teacher\" value=\"".$_POST['teacher']."\">";
echo "<option value=\"\">Select a Teacher</option>";
while ($ti = mysql_fetch_array($t)){
echo "<option value=\"".$ti['ID']."\"><font size=2>".$ti['forename']." ".$ti['surname']."</font></option>";
}
echo "</select>";
echo " <img src=\"/computing/images/error_bang.gif\" border=\"0\"> <font size=\"1\" color=\"FF0000\">Teacher Required</font>";
echo "<br>";
echo "<font size=2>School*</font><br><select name=\"school\" size=\"1\" id=\"school\" value=\"".$_POST['school']."\">";
echo "<option value=\"\">Select a School</option>";
while ($si = mysql_fetch_array($s)){
echo "<option value=\"".$si['ID']."\"><font size=2>".$si['school_name']."</font></option>";
}
echo "</select>";
echo " <img src=\"/computing/images/error_bang.gif\" border=\"0\"> <font size=\"1\" color=\"FF0000\">School Required</font>";
echo "<br>";
echo "D.O.B (YYYY-MM-DD)*<br>";
echo "<input type=\"text\" size=\"20\" name=\"dob\"  id=\"dob\" value=\"".$_POST['dob']."\">";
if($_POST['dob'] == ""){ echo " <img src=\"/computing/images/error_bang.gif\" border=\"0\"> <font size=\"1\" color=\"FF0000\">Date Of Birth Required</font>"; } else { echo " <img src=\"/computing/images/checkbullet.gif\" border=\"0\"> <font size=\"1\" color=\"4bed10\">Date Of Birth Entered</font>"; }
echo "<br>";
echo "<br><input type=\"submit\" value=\"Add Student\" class=\"submit\"><br>";
echo "</form>";

$forename = $_POST['forename'];
$surename = $_POST['surname'];
$username = $_POST['username'];
$password = $_POST['password'];
$teacher = $_POST['teacher'];
$school = $_POST['school'];
$dob = $_POST['dob'];
$uname = mysql_num_rows(mysql_query("SELECT * FROM `student` WHERE `username` = '$username'"));

if(($forename == "")OR($surname == "")OR($username == "")OR($password == "")OR($teacher == "")OR($school == "")OR($dob == "")){
echo "<br><font color=\"FF0000\">You are required to fill in all fields.<br>";
} elseif ($uname >= '1') {
echo "This username is already being used<br>";
} else {
$password = md5($password);
mysql_query("INSERT INTO `student` (`forename`, `surname`, `username`, `password`, `teacher`, `school`, `dob`) VALUES ('$forename', '$surname', '$username', '$password', '$teacher', '$school', '$dob')") or die(mysql_error());
echo "The Student, ".$forename." ".$surname." has been added successfully.<br>";

[GraphiX]

http://www.livevalidation.com/

 

With a few CSS tweaks, you would be able to make it display a tick when the correct value is entered.

[smithmr8]

I dont see how I missed that one, when I went searching for JS solutions. I'll give it a try.