submit button validation?

ray_nl · May 25, 2009

Hi,

I am trying to add a validation to the submit button so that when someone clicks submit, the form fields must be filled in. But.. the problem is tho that I have already assigned a cofirmation dialog box so that when someone clicks on the submit a confirmation dialog box appears asking you to confirm the details..

how can I make it so that when someone clicks submit all the fields must be filled in?

here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<link rel="stylesheet" type="text/css" href="travel.css"/>
<script type="text/javascript">
<!--
function confirmation() {


var answer = confirm("Confirm Booking?")
if (answer){

//I tried the below code to validate the submit button before processing, it works but the confirmation dialog box doesnt appear for some reason.//
//formvalidation(car_rental);return false(); {//
	alert("Booking Confirmed")
	document.booking.submit();

}
else{

	window.location = "Car.html";

}
}
//-->
</script>

    <title>Travel Air Home Page</title>

<script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var cal = new CalendarPopup();
</SCRIPT>



</head>
</head>

<body> 

<FORM NAME="car_rental">
 <div align="center">
<div id="header">
</div>


<div id="topnav">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Destinations.html">Destinations</a></li>
<li><a href="Flights.html">Flights</a></li>
<li><a href="car.html">Cars</a></li>
<li><a href="Hotels.html">Hotels</a></li>
<li><a href="Insurance.html">Insurance</a></li>
<li><a href="Build your own.html">Build your own</a></li>
<li><a href="Special Offers.html">Special Offers</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Forum.html">Forum</a></li>
<li><a href="Log.html">Log-In/Register</a></li>

</ul>
</div>

<div id="navigation">

<div id="Welcome">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
  id="name" width="490" height="560">
  <param name="movie" value="flash/header.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent">
  <embed name="name" src="flash/header.swf"
  quality="high" wmode="transparent" width="490" height="160"
  type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash">
  </embed>
</object> 

<hr/>
<hr/>
<div id="Why">


<H2>Reserve Online</H2>


        <body>
		<FORM METHOD="POST" ACTION="booking_process.php" name="booking" >   



        <div align="center">



        <input type="HIDDEN" name="first_pass" value="no">
        <table>

                           <td colspan="2"><b>Customer Information</b></td>
                       </tr>
                       <tr>


                           <td>First Name </td><td><input type="text" size="15" name="first_name"" maxlength="40"></td>

                       </tr>
                       <tr>
                           <td>Last Name </td><td><input type="text" size="20" name="last_name" maxlength="40"></td>

                       </tr>
                       <tr>
                           <td>Email </td><td><input type="text" size="20" name="email" maxlength="40"></td>

                       </tr>
                       <tr>
                           <td>Address</td><td><input type="text" size="30" name="address" maxlength="80"></td>

                       </tr>
                       <tr>
                           <td>Contact Number</td><td><input type="text" size="18" name="contact_no" maxlength="20"></td>

                       </tr>
                       <tr>
                           <td colspan="2"> </td>
                       </tr>
<script language="JavaScript" type="text/javascript">
		var frmvalidator = new Validator("car_rental");
		frmvalidator.addValidation("first_name","req","Please enter your First Name");
		frmvalidator.addValidation("first_name","maxlen=20",
	"Max length for FirstName is 20");
		frmvalidator.addValidation("first_name","alpha");

		frmvalidator.addValidation("last_name","req","Please enter your Last Name");
		frmvalidator.addValidation("last_name","maxlen=20");

		frmvalidator.addValidation("email","maxlen=50");
		frmvalidator.addValidation("email","req","Please enter your Email");
		frmvalidator.addValidation("email","email");

		frmvalidator.addValidation("address","maxlen=50");
		frmvalidator.addValidation("address","req","Please enter your Address");


		frmvalidator.addValidation("contact_no","maxlen=50");
		frmvalidator.addValidation("contact_no","req","Please enter your Contact Number");
		frmvalidator.addValidation("contact_no","num");




</script>

        </table>




<hr/>
<hr/>
        <table>
<div id="Why">

                       <tr>
                           <td colspan="2"><b>Vehicle Reservation</b></td>
                       </tr>
                       <tr>
                           <td>Vehicle Type</td><td>Number of Units</td>
                       </tr>
                       <tr>
                           <td>Car</td><td><select name="units_car">
                                       <option value="0">0
                                       <option value="1">1
                                       <option value="2">2
                                       <option value="3">3
                                       <option value="4">4
                                       <option value="5">5
                                       </select>
                           </td>
                       </tr>
                       <tr>
                           <td>Pickup</td><td><select name="units_pickup">
                                       <option value="0">0
                                       <option value="1">1
                                       <option value="2">2
                                       <option value="3">3
                                       <option value="4">4
                                       <option value="5">5
                                       </select>
                           </td>
                       </tr>
                       <tr>
                           <td>Van</td><td><select name="units_van">
                                       <option value="0">0
                                       <option value="1">1
                                       <option value="2">2
                                       <option value="3">3
                                       <option value="4">4
                                       <option value="5">5
                                       </select>
                           </td>
                       </tr>
                       <tr>
     <td>Reservation Date </td><td>   <INPUT TYPE="text" NAME="date1" VALUE="" SIZE=25>
<A HREF="Car.html"
   onClick="cal.select(document.forms['car_rental'].date1,'anchor1','MM/dd/yyyy'); return false;"
   NAME="anchor1" ID="anchor1">Select a date</A>
                            </td>
                       </tr>

</div>
        </table>
        <table>
                       <tr>
                            <td>Inquiries/Trip Details </td><td> </td>
                       </tr>
                       <tr>
                            <td colspan="2"><textarea name="inquiries" cols="42" rows="7"></textarea></td>
                       </tr>
                       <tr>
                            <td><input type="submit" onclick="confirmation()"> <input type="reset" value="clear"></td>
                       </tr>
        </table>
        </form>
</div>

<hr/>

<div id="loglink">
<H2>New to Travel Air?</H2>
By registering with Travel Air you gain several benefits. Once registered you can use the forums, leave reviews and start building your dream
holiday. All the information that is required is your name and email address. You can choose to receive free newsletters telling of new deals!
Follow this link to register or if you are a member log in
</div>

</div>
</body
</html>

MadTechie · May 25, 2009

do you want javascript validation or php validation ?

ray_nl · May 25, 2009

do you want javascript validation or php validation ?

if you look into my code all the fields are javascript validated.. so.. javascript validation

ToonMariner · May 25, 2009

what if javascript is turned off?

should always validate server-side - use javascript validation to improve the user experience by not having them submit a whol erequest just to get some errors back.

ray_nl · May 25, 2009

sorry im not really good at java or php.. is there some sort of a code that i can use to validate the submit button and still have the confirmation dialog box pop up when its all filled out and submitted?

cunoodle2 · May 25, 2009

ALWAYS validate with php (or some other server side script). ALWAYS ALWAYS ALWAYS. They can turn off java script at any time to avoid your pop up stuff. I can hack into a javascript form beyond anything you could possibly imagine.

ray_nl · May 25, 2009

ALWAYS validate with php (or some other server side script). ALWAYS ALWAYS ALWAYS. They can turn off java script at any time to avoid your pop up stuff. I can hack into a javascript form beyond anything you could possibly imagine.

lol.. ok but can you help me with this then? is there a php code that i can use?

cunoodle2 · May 25, 2009

<?php

//check to see if a form was submitted.
if (isset($_POST['submit']))

//if the form was submitted then get the names of all the items from the form.
$firstname = isSet($_POST['first_name']) ? $_POST['first_name'] : NULL;
$lastname = isSet($_POST['last_name']) ? $_POST['last_name'] : NULL;

//if first or last names are empty set the necessairy values to generate an error message
if ($firstname == NULL || $lastname == NULL)
{
$errorMessage = "Error: You must enter your first and last names.<br />\n";
}

?>

Axeia · May 25, 2009

Why do a double check? First if they're set, if not then assign null. And then check if they're null?

O submit they'd be set, just empty, something like this would work better.

//check to see if a form was submitted.
if (isset($_POST['submit']))
{
  //if first or last names are empty set the necessairy values to generate an error message
  if ( trim( isset( $_POST['last_name'] ) ) == '' || trim( isset( $_POST['last_name'] ) ) == '' )
  {
      $errorMessage = "Error: You must enter your first and last names.<br />\n";
  }
}

MadTechie · May 25, 2009

As this was meant for Javascript i should move it to the javascript section but, as people are talking about php validations i'll leave it here,

As for what validation to use, i use javascript for the first part (nice messages etc) but always have a PHP side (normally written first), the way i look at it is, if they disable the javascript they may not get the warning on the first page saying "sorry thats not a valid email" but once submitted, they will get a message their, and if i've been lazy they will need to re-enter all the details again

Sign In

submit button validation?

Recommended Posts

ray_nl

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

ray_nl

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

ray_nl

Link to comment

Share on other sites

cunoodle2

Link to comment

Share on other sites

ray_nl

Link to comment

Share on other sites

cunoodle2

Link to comment

Share on other sites

Axeia

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information