HELP php - error response page??

wblati · November 14, 2008

hi, im having trouble getting my submit button to send me to a response page where erros should appear(ie validation for name, email, radio buttons, etc). also if someone can help me instead of sending the user to another page where all the errors appear, maybe have it along side drop boxes, radio buttons, etc. THANKS.

the first code is java script where normal validation will take place.

<html>
<head>
<style type=text/css>
input.blue {background-color: #0066FF; font-weight: bold; font-size: 12px; color: white;}
input.violet {background-color: #ccccff; font-size: 14px;}
textarea.violet {background-color: #ccccff; font-size: 14px;}
option.red {background-color: #cc0000; font-weight: bold; font-size: 14px; color: white;}
option.pink {background-color: #ffcccc;}
.style2 { color: #990000;
font-weight: bold;
font-size: 36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style5 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
.style6 {font-family: Arial, Helvetica, sans-serif}
body {
background-color: #FFFFCC;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<title>MOVIE BOOKING</title>
<script type='text/javascript'>


function report()// TAKEN FROM http://www.tizag.com/javascriptT/javascriptform.php
{
if (formValidator()) {
var thisForm = document.myForm;
}
}

function formValidator(){
// Make quick references to our fields
var nameOnCard = document.getElementById('nameOnCard');
var cardNumber = document.getElementById('cardNumber');
var cardType = document.getElementById('cardType');
var email = document.getElementById('email');
var movie = document.getElementById('movie');
var date = document.getElementById('date');
var time = document.getElementById('time');
var typeOfTicket = document.getElementById('typeOfTicket');

// Check each input in the order that it appears in the form!
if(notEmpty(nameOnCard, "Please enter a name")){
if(isAlphabet(nameOnCard, "Please enter only letters for name")){
if(notEmpty(email, "Please enter an email")){
if(emailValidator(email, "Please enter a valid email address")){
if(isNumeric(cardNumber, "Please enter only numbers")){
if(lengthRestriction(cardNumber, 9,9)){
if(madeSelection(cardType, "Please choose a card type")){
if(madeSelection(movie, "Please choose a movie")){
if(madeSelection(date, "Please choose a date")){
if(valRadio(time, "Please choose a time")){
if(valCheck(typeOfTicket, "Please choose a type of ticket")){
return true;

}
}
}
}
}
}
}
}
}
}
}


return false;

}

function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter only 9 numbers");
elem.focus();
return false;
}
}

function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}

function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function valRadio(thisform) {//TAKEN FROM http://www.felgall.com/javatip2.htm
myOption = -1;
for (i=myForm.time.length-1; i > -1; i--) {
if (myForm.time[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please choose a time");
return false;
}

thisform.submit();
}

function valCheck() {
if (document.myForm.adult.checked == false &&
document.myForm.senior.checked == false &&
document.myForm.student.checked == false &&
document.myForm.teen.checked == false)
{
alert ('Please choose a type of ticket!');
return false;
}
else
{
return true;
}
}

// CALCULATIONS TAKEN OUT------------------------------------------------------------------------------------------------------------

/* function CheckChoice(whichbox)//TAKEN FROM http://javascript.internet.com/forms/order-form.html
{
with (whichbox.form)
{
if (whichbox.type == "radio")
{
hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
hiddenpriorradio.value = eval(whichbox.price);
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
}
else
{
if (whichbox.checked == false)
{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
else { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
}

if (hiddentotal.value < 0)
{
InitForm();
}

return(formatCurrency(hiddentotal.value));
}
}

function formatCurrency(num)//TAKEN FROM http://javascript.internet.com/forms/order-form.html
{
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '£' + num + '.' + cents);
}

function InitForm()//TAKEN FROM http://javascript.internet.com/forms/order-form.html
{
//Reset the displayed total on form:
document.myform.total.value='£0';
document.myform.hiddentotal.value=0;
document.myform.hiddenpriorradio.value=0;
document.myform2.total.value='£0';
document.myform2.hiddentotal.value=0;
document.myform2.hiddenpriorradio.value=0;
document.myform2.hiddenpriorradio.value=0;

for (xx=0; xx < document.myform.elements.length; xx++)
{
if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio')
{
document.myform.elements[xx].checked = false;
}
}
for (xx=0; xx < document.myform2.elements.length; xx++)
{
if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio')
{
document.myform2.elements[xx].checked = false;
}
}

}

---------------------------------------------------------------------------------------------------------------------------------------*/

</script>
<body>
<FORM NAME="myForm" action="http://localhost/adw%20php_v3/response%20cinema%20booking_v1.php" METHOD="POST" onSubmit="return formValidator();">

<div align="center"><span class="style2">ONLINE MOVIE BOOKING </span>
</div>
<div align="center">
<table width="444" border="1">
<tr>
<td><span class="style5">NAME ON CARD: </span></td>
<td><input name="text" type='text' class="violet " id='nameOnCard'></td>
</tr>
<tr>
<td><span class="style5">EMAIL: </span></td>
<td><input name="text2" type='text' class="violet " id='email' /></td>
</tr>
<tr>
<td><span class="style5">CARD NUMBER: </span></td>
<td><input name="number" type='number' class="violet " id='cardNumber'></td>
</tr>
<tr>
<td><span class="style5">CARD TYPE: </span></td>
<td><span class="style6">
<select name="select" id='cardType'>
<option class="red" >Please Choose</option>
<option class="pink" >VISA</option>
<option class="pink" >Mastercard</option>
<option class="pink" >American Express</option>
</select>
</span></td>
</tr>
<tr>
<td><span class="style5"><br />
MOVIES: </span></td>
<td><span class="style6">
<select name="select2" id='movie'>
<option class="red" >Please Choose</option>
<option class="pink" >Burn After Reading</option>
<option class="pink" >Planet Terror</option>
<option class="pink" >Tropic Thunder</option>
<option class="pink" >Quantum of solace</option>
</select>
</span></td>
</tr>
<tr>
<td><span class="style5">DATE: </span></td>
<td><span class="style6">
<select name="select3" id='date'>
<option class="red" >Please Choose</option>
<option class="pink" >October 20</option>
<option class="pink" >October 21</option>
<option class="pink" >October 22</option>
<option class="pink" >October 23</option>
<option class="pink" >October 24</option>
<option class="pink" >October 25</option>
<option class="pink" >October 26</option>
<option class="pink" >October 27</option>
</select>
</span></td>
</tr>
<tr>
<td><span class="style5"><br />
TIME: </span></td>
<td><span class="style6">
<input type="radio" value="10:40am" name="time" />
10:40am<br />
<input type="radio" value="1:00pm" name="time" />
1:00pm<br />
<input type="radio" value="3:50pm" name="time" />
3:50pm<br />
<input type="radio" value="6:10pm" name="time" />
6:10pm<br />
<input type="radio" value="8:40pm" name="time" />
8:40pm<br />
<input type="radio" value="9:10pm" name="time" />
9:10pm</span></td>
</tr>
</table>
</div>
<p align="center"><br>
<textarea rows="5" cols="36" name="info" readonly></textarea>
</p>
<p align="center">
<input class="blue" type="button" name="buttont" value="SUBMIT" onClick= "report()">
</p>
<p align="center">
<input class="blue" name="Submit2" type="reset" value="CLEAR ALL FIELDS" />
</p>
</form>

</body>
</html>

this second code is my response page where the php validation will occur. ive only entered the nameOnCard to test it.

<html>

<?php
$nameOnCard = $_POST['nameOnCard']; //code taken from http://www.tizag.com/phpT/examples/formvar.php

$status_form="OK";

if (empty($firstName))
{
$status_form="NOTOK";
echo "Please enter a name";

} else if(ereg('[^A-Za-z]', $firstName)){
$status_form="NOTOK";
echo "<Please enter only letter for name>";
}else{
}

if ($status_form=="OK"){
$status_form="OK";

include('thanku.php');
}
exit;

?>

</html>

Psycho · November 14, 2008

Well there's a lot I would do differently. I've rewrote the vlaidation for only the name and email fields to include in-place error indicators in addition to a single error message for all the errors. Not the the in-place error indicators include hover text (titles). I would use an image for this purpose in an actual implementaion.

<html>
<head>
<style type=text/css>
input.blue {background-color: #0066FF; font-weight: bold; font-size: 12px; color: white;}
input.violet {background-color: #ccccff; font-size: 14px;}
textarea.violet {background-color: #ccccff; font-size: 14px;}
option.red {background-color: #cc0000; font-weight: bold; font-size: 14px; color: white;}
option.pink {background-color: #ffcccc;}
.style2 { color: #990000;
font-weight: bold;
font-size: 36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style5 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
.style6 {font-family: Arial, Helvetica, sans-serif}
body {
background-color: #FFFFCC;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<title>MOVIE BOOKING</title>
<script type='text/javascript'>


function report()// TAKEN FROM http://www.tizag.com/javascriptT/javascriptform.php
{
    if (formValidator()) {
        var thisForm = document.myForm;
    }
}

function formValidator()
{
    var errors = new Array();

    // Check name field
    if(empty('nameOnCard') || !isAlphabet('nameOnCard'))
    {
        document.getElementById('nameOnCard_err').style.visibility = '';
        errors[errors.length] = "Name is required and must contain only alpha characters";
    }
    else
    {
        document.getElementById('nameOnCard_err').style.visibility = 'hidden';
    }


    // Check email field
    if(empty('email') || !validEmail('email'))
    {
        document.getElementById('email_err').style.visibility = '';
        errors[errors.length] = "Email is not valid";
    }
    else
    {
        document.getElementById('email_err').style.visibility = 'hidden';
    }

    if (errors.length==0)
    {
        return true;
    }

    var error_msg = 'The following errors occured:\n\n';

    for (i=0; i<errors.length; i++)
    {
        error_msg += ' - ' + errors[i] + '\n';
    }

    alert(error_msg);
    return falses;
}

function empty(elem_id)
{
    return (document.getElementById(elem_id).value.length == 0);
}

function isAlphabet(elem_id)
{
    var alphaExp = /^[a-zA-Z]+$/;
    return document.getElementById(elem_id).value.match(alphaExp);
}

function validEmail(elem_id){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    return document.getElementById(elem_id).value.match(emailExp);
}



// CALCULATIONS TAKEN OUT------------------------------------------------------------------------------------------------------------

/* function CheckChoice(whichbox)//TAKEN FROM http://javascript.internet.com/forms/order-form.html
{
with (whichbox.form)
{
if (whichbox.type == "radio")
{
hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
hiddenpriorradio.value = eval(whichbox.price);
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
}
else
{
if (whichbox.checked == false)
{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
else { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
}

if (hiddentotal.value < 0)
{
InitForm();
}

return(formatCurrency(hiddentotal.value));
}
}

function formatCurrency(num)//TAKEN FROM http://javascript.internet.com/forms/order-form.html
{
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '£' + num + '.' + cents);
}

function InitForm()//TAKEN FROM http://javascript.internet.com/forms/order-form.html
{
//Reset the displayed total on form:
document.myform.total.value='£0';
document.myform.hiddentotal.value=0;
document.myform.hiddenpriorradio.value=0;
document.myform2.total.value='£0';
document.myform2.hiddentotal.value=0;
document.myform2.hiddenpriorradio.value=0;
document.myform2.hiddenpriorradio.value=0;

for (xx=0; xx < document.myform.elements.length; xx++)
{
if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio')
{
document.myform.elements[xx].checked = false;
}
}
for (xx=0; xx < document.myform2.elements.length; xx++)
{
if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio')
{
document.myform2.elements[xx].checked = false;
}
}

}

---------------------------------------------------------------------------------------------------------------------------------------*/

</script>
<body>
<FORM NAME="myForm" action="http://localhost/adw%20php_v3/response%20cinema%20booking_v1.php" METHOD="POST" onSubmit="return formValidator();">

<div align="center"><span class="style2">ONLINE MOVIE BOOKING </span>
</div>
<div align="center">
<table width="444" border="1">
<tr>
<td><span class="style5">NAME ON CARD: </span><span id="nameOnCard_err" style="color:red;visibility:hidden;" title="Name is required and must contain only letters">[X]</span></td>
<td><input name="text" type='text' class="violet " id='nameOnCard'></td>
</tr>
<tr>
<td><span class="style5">EMAIL: </span><span id="email_err" style="color:red;visibility:hidden;" title="Email is empty or not valid">[X]</span></td>
<td><input name="text2" type='text' class="violet " id='email' /></td>
</tr>
<tr>
<td><span class="style5">CARD NUMBER: </span></td>
<td><input name="number" type='number' class="violet " id='cardNumber'></td>
</tr>
<tr>
<td><span class="style5">CARD TYPE: </span></td>
<td><span class="style6">
<select name="select" id='cardType'>
<option class="red" >Please Choose</option>
<option class="pink" >VISA</option>
<option class="pink" >Mastercard</option>
<option class="pink" >American Express</option>
</select>
</span></td>
</tr>
<tr>
<td><span class="style5"><br />
MOVIES: </span></td>
<td><span class="style6">
<select name="select2" id='movie'>
<option class="red" >Please Choose</option>
<option class="pink" >Burn After Reading</option>
<option class="pink" >Planet Terror</option>
<option class="pink" >Tropic Thunder</option>
<option class="pink" >Quantum of solace</option>
</select>
</span></td>
</tr>
<tr>
<td><span class="style5">DATE: </span></td>
<td><span class="style6">
<select name="select3" id='date'>
<option class="red" >Please Choose</option>
<option class="pink" >October 20</option>
<option class="pink" >October 21</option>
<option class="pink" >October 22</option>
<option class="pink" >October 23</option>
<option class="pink" >October 24</option>
<option class="pink" >October 25</option>
<option class="pink" >October 26</option>
<option class="pink" >October 27</option>
</select>
</span></td>
</tr>
<tr>
<td><span class="style5"><br />
TIME: </span></td>
<td><span class="style6">
<input type="radio" value="10:40am" name="time" />
10:40am<br />
<input type="radio" value="1:00pm" name="time" />
1:00pm<br />
<input type="radio" value="3:50pm" name="time" />
3:50pm<br />
<input type="radio" value="6:10pm" name="time" />
6:10pm<br />
<input type="radio" value="8:40pm" name="time" />
8:40pm<br />
<input type="radio" value="9:10pm" name="time" />
9:10pm</span></td>
</tr>
</table>
</div>
<p align="center"><br>
<textarea rows="5" cols="36" name="info" readonly></textarea>
</p>
<p align="center">
<input class="blue" type="button" name="buttont" value="SUBMIT" onClick= "report()">
</p>
<p align="center">
<input class="blue" name="Submit2" type="reset" value="CLEAR ALL FIELDS" />
</p>
</form>

</body>
</html>

wblati · November 15, 2008

thanks mjdamato, that really helped alot. just need to do the rest of the validation.

also im having trouble getting to do a validation check on the checkboxes. i tried numerous codes without any luck.

wblati · November 15, 2008

just found out that the code you did was javascript(client side). i want the validation to work with php(server side). any ideas? thanks.

Psycho · November 15, 2008

also im having trouble getting to do a validation check on the checkboxes. i tried numerous codes without any luck.

Validate how? A checkbox is either checked or it is not. If it is not checked then the field is not included in the POST data.

just found out that the code you did was javascript(client side). i want the validation to work with php(server side). any ideas? thanks.

Then just do the same type of validation in the PHP code and set the visibility of the spans based upon the result of the validation? If I was going to do all of that I would probably write it completely different, but I was working with the code you provided.

wblati · November 15, 2008

im kind of new to javascript and php.

if you could please do the same example you did with java but in php(name and email to start off with) in your way then that will help me quite abit. thanks.

Psycho · November 15, 2008

As I said I would do all that completely different and I don' thave the time to do a complete rewrite, but here is a quick example of what you could do in the PHP with what you have already.

PHP code at the top of page:

<?php

if(isset($_POST))
{
    $name_error_vis = (empty($_POST['text']) || !ctype_alpha($_POST['text'])) ? '' : 'hidden';
    $name_error_vis = (empty($_POST['text2']) || !valid_email($_POST['text2']) ? '' : 'hidden';
}
else
{
    $name_error_vis = 'hidden';
    $email_error_vis = 'hidden';
}

function valid_email($email) {
    $formatTest = '/^[-\w+]+(\.[-\w+]+)*@[-a-z\d]{2,}(\.[-a-z\d]{2,})*\.[a-z]{2,6}$/i';
    $lengthTest = '/^(.{1,64})@(.{4,255})$/';
    return (preg_match($formatTest, $email) && preg_match($lengthTest, $email));
}    

?>

Change the fields like this:

<tr>
  <td>
    <span class="style5">NAME ON CARD: </span>
    <span id="nameOnCard_err" style="color:red;visibility:<?php echo $name_error_vis; ?>;" title="Name is required and must contain only letters">[X]</span>
  </td>
  <td><input name="text" type='text' class="violet " id='nameOnCard'></td>
</tr>
<tr>
  <td>
    <span class="style5">EMAIL: </span>
    <span id="email_err" style="color:red;visibility:<?php echo $name_error_vis; ?>;" title="Email is empty or not valid">[X]</span>
  </td>
  <td><input name="text2" type='text' class="violet " id='email' /></td>
</tr>

Note: I used my php email validator script which is different than your javascript email validator. Here is my javascript script that is consistent with the php one:

function validEmail(emailStr)
{
    //Return true/false for valid/invalid email
    formatTest = /^[-\w+]+(\.[-\w+]+)*@[-a-z\d]{2,}(\.[-a-z\d]{2,})*\.[a-z]{2,6}$/i
    lengthTest = /^(.{1,64})@(.{4,255})$/
    return (formatTest.test(emailStr) && lengthTest.test(emailStr));
}

Sign In

HELP php - error response page??

Recommended Posts

wblati

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

wblati

Link to comment

Share on other sites

wblati

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

wblati

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information