ats2012
asked on
Need to validate dynamic form using Javascript
I am creating a dynamic form using Javascript and need to be able to validate the form data before the user can create a new form when clicking the button. I am new at Javascript and having some issues with the array's of values for each form. Below is what i am looking for:
When Add leg is pressed it needs to check that there is a departure and and destination. Either the frequently used or if they type in a new address manually.
The time needs to be filled in.
Date needs to be filled in
Depature/Arrival Schedule priority drop down needs to be selected instead of Select One
Below is the code:
for-after-clicking-Leg.PNG
When Add leg is pressed it needs to check that there is a departure and and destination. Either the frequently used or if they type in a new address manually.
The time needs to be filled in.
Date needs to be filled in
Depature/Arrival Schedule priority drop down needs to be selected instead of Select One
Below is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
<script src="scripts/date_picker/jquery-1.8.0.js"></script>
<script src="scripts/date_picker/jquery.ui.core.js"></script>
<script src="scripts/date_picker/jquery.ui.widget.js"></script>
<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="scripts/date_picker/date.css">
<SCRIPT language="javascript">
function addRow(tableID) {
var table = $("#"+tableID);
var rowCount = $(">tbody>tr", table).length;
if(rowCount>=7){
alert("Can't have more than 7 rows.");
return;
}
var row = $(">tbody>tr:last", table).clone().appendTo(table);
$(":text", row).val("");
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);
var elTab = document.getElementById(tableID);
var replace='Leg '+(rowCount).toString();
var replace2='Leg '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);
$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
}
window.onload = function() {
$("[id=datepicker]").datepicker();
}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>
<form action="book_flight.php" method="post" id="request">
<table border="0" width="1000">
<tr>
<td width="1700" valign="top">
<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
<table id="dataTrack">
<TR>
<TD>
<table width="700" border="0" class="searchform">
<tr>
<td><b>Leg 1</b></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Date:</b></td>
<td><input type="text" name="departure_date[]" id="datepicker"></td>
<td></td>
<td></td>
</tr>
<?php
$time_list = array(
'Select One',
"Departure Time:",
"Arrival Time:");
?>
<tr>
<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
echo'<select name="time_state[]" class="searchfield">';
foreach($time_list as $time_state){
echo'<option value="'.$time_state.'">'.$time_state.'</option>';
}
echo'</select>';
?></td>
<td><b>Time: </b><input class="searchfield_time" type="text" name="time[]"><?php
$time_list = array(
'AM',
"PM");
echo'<select name="time_ampm[]" class="searchfield_time_ampm">';
foreach($time_list as $time_ampm){
echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';
}
echo'</select>';
?></td>
</tr>
<tr>
<td><b>Departure</b></td>
<td></td>
<td><b>Destination 1</b></td>
<td></td>
</tr>
<tr>
<td><?php
$con = mysql_connect("localhost","root","pass");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('flight_track');
$query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
$query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
?>
<b>Frequently Used:</b>
</td>
<td>
<select name="location_departure[]" class="searchfield_sup">
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
$location_departure = htmlentities($data['name']);
echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
</td>
<td>
<b>Frequently Used:</b>
</td>
<td>
<select name="location_destination[]" class="searchfield_sup">
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
$location_destination = htmlentities($data['name']);
echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
</td>
</tr>
<tr>
<td><b>City:</b></td>
<td><input class="searchfield_state" type="text" name="departure_city[]"></td>
<td><b>City:</b></td>
<td><input class="searchfield_state" type="text" name="arrival_city[]"></td>
</tr>
<?php
$state_list = array(
'Select One',
'AB'=>"Canada - Alberta",
'BC'=>"Canada - British Columbia",
'MB'=>"Canada - Manitoba",
'NB'=>"Canada - New Brunswick",
'NL'=>"Canada - Newfoundland and Labrador",
'NT'=>"Canada - Northwest Territory",
'NS'=>"Canada - Nova Scotia",
'NU'=>"Canada - Nunavut",
'ON'=>"Canada - Ontario",
'PE'=>"Canada - Prince Edward Island",
'QC'=>"Canada - Quebec",
'SK'=>"Canada - Saskatchewan",
'YT'=>"Canada - Yukon",
'PR'=>"Puerto Rico",
'MX'=>"Mexico",
'AL'=>"Alabama",
'AK'=>"Alaska",
'AZ'=>"Arizona",
'AR'=>"Arkansas",
'CA'=>"California",
'CO'=>"Colorado",
'CT'=>"Connecticut",
'DE'=>"Delaware",
'DC'=>"District Of Columbia",
'FL'=>"Florida",
'GA'=>"Georgia",
'HI'=>"Hawaii",
'ID'=>"Idaho",
'IL'=>"Illinois",
'IN'=>"Indiana",
'IA'=>"Iowa",
'KS'=>"Kansas",
'KY'=>"Kentucky",
'LA'=>"Louisiana",
'ME'=>"Maine",
'MD'=>"Maryland",
'MA'=>"Massachusetts",
'MI'=>"Michigan",
'MN'=>"Minnesota",
'MS'=>"Mississippi",
'MO'=>"Missouri",
'MT'=>"Montana",
'NE'=>"Nebraska",
'NV'=>"Nevada",
'NH'=>"New Hampshire",
'NJ'=>"New Jersey",
'NM'=>"New Mexico",
'NY'=>"New York",
'NC'=>"North Carolina",
'ND'=>"North Dakota",
'OH'=>"Ohio",
'OK'=>"Oklahoma",
'OR'=>"Oregon",
'PA'=>"Pennsylvania",
'RI'=>"Rhode Island",
'SC'=>"South Carolina",
'SD'=>"South Dakota",
'TN'=>"Tennessee",
'TX'=>"Texas",
'UT'=>"Utah",
'VT'=>"Vermont",
'VA'=>"Virginia",
'WA'=>"Washington",
'WV'=>"West Virginia",
'WI'=>"Wisconsin",
'WY'=>"Wyoming"
);
?>
<tr>
<td><b>State:</b></td>
<td><?php
echo'<select name="departure_state[]" class="searchfield_state">';
foreach($state_list as $departure_state){
echo'<option value="'.$departure_state.'">'.$departure_state.'</option>';
}
echo'</select>';
?></td>
<td><b>State:</b></td>
<td><?php
echo'<select name="arrival_state[]" class="searchfield_state">';
foreach($state_list as $arrival_state){
echo'<option value="'.$arrival_state.'">'.$arrival_state.'</option>';
}
echo'</select>';
?></td>
</tr>
<tr>
<td><b>Zip Code:</b></td>
<td><input class="searchfield_state" type="text" name="departure_zipcode[]"></td>
<td><b>Zip Code:</b></td>
<td><input class="searchfield_state" type="text" name="arrival_zipcode[]"></td>
</tr>
</table>
</TD>
</TR>
</table>
<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
</form>
</td>
</tr>
</table>
</body>
</html>for-after-clicking-Leg.PNG
I second that. Then as you dynamically add form components their class (that you would allocate them) will determine the type of validation required
see this thread
http://answers.google.com/answers/threadview?id=529312
http://answers.google.com/answers/threadview?id=529312
I was going to bash your suggestion because it is from 2005, however the second solution is not too bad
ASKER
This is what i have so far. How do I make it work with the button instead of putting the ID in form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
<script src="scripts/date_picker/jquery-1.8.0.js"></script>
<script src="scripts/date_picker/jquery.ui.core.js"></script>
<script src="scripts/date_picker/jquery.ui.widget.js"></script>
<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="scripts/date_picker/date.css">
<script src="scripts/validate/jquery.validate.js" type="text/javascript"></script>
<SCRIPT language="javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
function addRow(tableID) {
$().ready(function() {
// validate signup form on keyup and submit
$("#request").validate({
rules: {
datepicker: "required",
},
messages: {
datepicker: "Please enter your firstname",
}
});
});
var table = $("#"+tableID);
var rowCount = $(">tbody>tr", table).length;
if(rowCount>=7){
alert("Can't have more than 7 rows.");
return;
}
var row = $(">tbody>tr:last", table).clone().appendTo(table);
$(":text", row).val("");
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);
var elTab = document.getElementById(tableID);
var replace='Leg '+(rowCount).toString();
var replace2='Leg '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);
$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
}
window.onload = function() {
$("[id=datepicker]").datepicker();
}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>
<form action="book_flight.php" method="post" id="request">
<table border="0" width="1000">
<tr>
<td width="1700" valign="top">
<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
<table id="dataTrack">
<TR>
<TD>
<table width="700" border="0" class="searchform">
<tr>
<td><b>Leg 1</b></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Date:</b></td>
<td><input type="text" name="departure_date[]" id="datepicker" required></td>
<td></td>
<td></td>
</tr>
<?php
$time_list = array(
'Select One',
"Departure Time:",
"Arrival Time:");
?>
<tr>
<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
echo'<select name="time_state[]" class="searchfield">';
foreach($time_list as $time_state){
echo'<option value="'.$time_state.'">'.$time_state.'</option>';
}
echo'</select>';
?></td>
<td><b>Time: </b><input id="time" class="searchfield_time" type="text" name="time[]"><?php
$time_list = array(
'AM',
"PM");
echo'<select name="time_ampm[]" class="searchfield_time_ampm">';
foreach($time_list as $time_ampm){
echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';
}
echo'</select>';
?></td>
</tr>
<tr>
<td><b>Departure</b></td>
<td></td>
<td><b>Destination 1</b></td>
<td></td>
</tr>
<tr>
<td><?php
$con = mysql_connect("localhost","root","pass");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('flight_track');
$query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
$query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
?>
<b>Frequently Used:</b>
</td>
<td>
<select name="location_departure[]" class="searchfield_sup">
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
$location_departure = htmlentities($data['name']);
echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
</td>
<td>
<b>Frequently Used:</b>
</td>
<td>
<select name="location_destination[]" class="searchfield_sup">
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
$location_destination = htmlentities($data['name']);
echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
</td>
</tr>
<tr>
<td><b>City:</b></td>
<td><input class="searchfield_state" type="text" name="departure_city[]"></td>
<td><b>City:</b></td>
<td><input class="searchfield_state" type="text" name="arrival_city[]"></td>
</tr>
<?php
$state_list = array(
'Select One',
'AB'=>"Canada - Alberta",
'BC'=>"Canada - British Columbia",
'MB'=>"Canada - Manitoba",
'NB'=>"Canada - New Brunswick",
'NL'=>"Canada - Newfoundland and Labrador",
'NT'=>"Canada - Northwest Territory",
'NS'=>"Canada - Nova Scotia",
'NU'=>"Canada - Nunavut",
'ON'=>"Canada - Ontario",
'PE'=>"Canada - Prince Edward Island",
'QC'=>"Canada - Quebec",
'SK'=>"Canada - Saskatchewan",
'YT'=>"Canada - Yukon",
'PR'=>"Puerto Rico",
'MX'=>"Mexico",
'AL'=>"Alabama",
'AK'=>"Alaska",
'AZ'=>"Arizona",
'AR'=>"Arkansas",
'CA'=>"California",
'CO'=>"Colorado",
'CT'=>"Connecticut",
'DE'=>"Delaware",
'DC'=>"District Of Columbia",
'FL'=>"Florida",
'GA'=>"Georgia",
'HI'=>"Hawaii",
'ID'=>"Idaho",
'IL'=>"Illinois",
'IN'=>"Indiana",
'IA'=>"Iowa",
'KS'=>"Kansas",
'KY'=>"Kentucky",
'LA'=>"Louisiana",
'ME'=>"Maine",
'MD'=>"Maryland",
'MA'=>"Massachusetts",
'MI'=>"Michigan",
'MN'=>"Minnesota",
'MS'=>"Mississippi",
'MO'=>"Missouri",
'MT'=>"Montana",
'NE'=>"Nebraska",
'NV'=>"Nevada",
'NH'=>"New Hampshire",
'NJ'=>"New Jersey",
'NM'=>"New Mexico",
'NY'=>"New York",
'NC'=>"North Carolina",
'ND'=>"North Dakota",
'OH'=>"Ohio",
'OK'=>"Oklahoma",
'OR'=>"Oregon",
'PA'=>"Pennsylvania",
'RI'=>"Rhode Island",
'SC'=>"South Carolina",
'SD'=>"South Dakota",
'TN'=>"Tennessee",
'TX'=>"Texas",
'UT'=>"Utah",
'VT'=>"Vermont",
'VA'=>"Virginia",
'WA'=>"Washington",
'WV'=>"West Virginia",
'WI'=>"Wisconsin",
'WY'=>"Wyoming"
);
?>
<tr>
<td><b>State:</b></td>
<td><?php
echo'<select name="departure_state[]" class="searchfield_state">';
foreach($state_list as $departure_state){
echo'<option value="'.$departure_state.'">'.$departure_state.'</option>';
}
echo'</select>';
?></td>
<td><b>State:</b></td>
<td><?php
echo'<select name="arrival_state[]" class="searchfield_state">';
foreach($state_list as $arrival_state){
echo'<option value="'.$arrival_state.'">'.$arrival_state.'</option>';
}
echo'</select>';
?></td>
</tr>
<tr>
<td><b>Zip Code:</b></td>
<td><input class="searchfield_state" type="text" name="departure_zipcode[]"></td>
<td><b>Zip Code:</b></td>
<td><input class="searchfield_state" type="text" name="arrival_zipcode[]"></td>
</tr>
</table>
</TD>
</TR>
</table>
<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
</form>
</td>
</tr>
</table>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I got this working using https://github.com/posabsolute/jQuery-Validation-Engine but its not working in Internet Explorer. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>
<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/date_picker/jquery.ui.all.css">
<script src="scripts/date_picker/jquery-1.8.0.js"></script>
<script src="scripts/date_picker/jquery.ui.core.js"></script>
<script src="scripts/date_picker/jquery.ui.widget.js"></script>
<script src="scripts/date_picker/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="scripts/date_picker/date.css">
<script src="scripts/validate/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="scripts/validate/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<SCRIPT language="javascript">
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#request").validationEngine();
$("#request").bind("jqv.form.validating", function(event){
$("#hookError").html("")
})
$("#request").bind("jqv.form.result", function(event , errorFound){
if(errorFound) $("#hookError").append("There is some problems with your form");
})
});
function addRow(tableID) {
var table = $("#"+tableID);
var rowCount = $(">tbody>tr", table).length;
if(rowCount>=7){
alert("Can't have more than 7 rows.");
return;
}
var row = $(">tbody>tr:last", table).clone().appendTo(table);
$(":text", row).val("");
var elTab = document.getElementById(tableID);
var replace='Destination '+(rowCount).toString();
var replace2='Destination '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);
var elTab = document.getElementById(tableID);
var replace='Leg '+(rowCount).toString();
var replace2='Leg '+(rowCount+1).toString();
elTab.rows[rowCount].cells[0].innerHTML = elTab.rows[rowCount].cells[0].innerHTML.replace(replace,replace2);
$(":text[id^=datepicker]", row).removeClass("datepicker hasDatepicker").attr({id: "datepicker"+rowCount, value:""}).datepicker();
}
window.onload = function() {
$("[id=datepicker]").datepicker();
}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>
<form action="book_flight_form.php" method="post" id="request">
<table border="0" width="1000">
<tr>
<td width="1700" valign="top">
<b><img src='images/plane.png' width='50' height='50' align='middle'/> Flight Information</b>
<table id="dataTrack">
<TR>
<TD>
<table width="700" border="0" class="searchform">
<tr>
<td><b>Leg 1</b></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Date:</b></td>
<td><input type="text" name="departure_date[]" id="datepicker" class="validate[required] text-input"></td>
<td></td>
<td></td>
</tr>
<?php
$time_list = array(
'Select One',
"Departure Time:",
"Arrival Time:");
?>
<tr>
<td colspan="3"><b>Departure/Arrival Schedule Priority: </b><?php
echo'<select name="time_state[]" class="searchfield">';
foreach($time_list as $time_state){
echo'<option value="'.$time_state.'">'.$time_state.'</option>';
}
echo'</select>';
?></td>
<td><b>Time: </b><input id="time" class="searchfield_time" type="text" name="time[]"><?php
$time_list = array(
'AM',
"PM");
echo'<select name="time_ampm[]" class="searchfield_time_ampm">';
foreach($time_list as $time_ampm){
echo'<option value="'.$time_ampm.'">'.$time_ampm.'</option>';
}
echo'</select>';
?></td>
</tr>
<tr>
<td><b>Departure</b></td>
<td></td>
<td><b>Destination 1</b></td>
<td></td>
</tr>
<tr>
<td><?php
$con = mysql_connect("localhost","root","pass");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('flight_track');
$query_loc = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
$query_loc_two = mysql_query("SELECT * FROM locations ORDER BY name ASC") or die (mysql_error());
?>
<b>Frequently Used:</b>
</td>
<td>
<select name="location_departure[]" class="searchfield_sup">
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc, MYSQL_ASSOC))
{
$location_departure = htmlentities($data['name']);
echo '<option value="'.$location_departure.'">'.$location_departure."</option>\n";
}
?>
</select>
</td>
<td>
<b>Frequently Used:</b>
</td>
<td>
<select name="location_destination[]" class="searchfield_sup">
<option value= "" selected value=""></option>
<?php
while ($data = mysql_fetch_array($query_loc_two, MYSQL_ASSOC))
{
$location_destination = htmlentities($data['name']);
echo '<option value="'.$location_destination.'">'.$location_destination."</option>\n";
}
?>
</select>
</td>
</tr>
<tr>
<td><b>City:</b></td>
<td><input class="searchfield_state" type="text" name="departure_city[]"></td>
<td><b>City:</b></td>
<td><input class="searchfield_state" type="text" name="arrival_city[]"></td>
</tr>
<?php
$state_list = array(
'Select One',
'AB'=>"Canada - Alberta",
'BC'=>"Canada - British Columbia",
'MB'=>"Canada - Manitoba",
'NB'=>"Canada - New Brunswick",
'NL'=>"Canada - Newfoundland and Labrador",
'NT'=>"Canada - Northwest Territory",
'NS'=>"Canada - Nova Scotia",
'NU'=>"Canada - Nunavut",
'ON'=>"Canada - Ontario",
'PE'=>"Canada - Prince Edward Island",
'QC'=>"Canada - Quebec",
'SK'=>"Canada - Saskatchewan",
'YT'=>"Canada - Yukon",
'PR'=>"Puerto Rico",
'MX'=>"Mexico",
'AL'=>"Alabama",
'AK'=>"Alaska",
'AZ'=>"Arizona",
'AR'=>"Arkansas",
'CA'=>"California",
'CO'=>"Colorado",
'CT'=>"Connecticut",
'DE'=>"Delaware",
'DC'=>"District Of Columbia",
'FL'=>"Florida",
'GA'=>"Georgia",
'HI'=>"Hawaii",
'ID'=>"Idaho",
'IL'=>"Illinois",
'IN'=>"Indiana",
'IA'=>"Iowa",
'KS'=>"Kansas",
'KY'=>"Kentucky",
'LA'=>"Louisiana",
'ME'=>"Maine",
'MD'=>"Maryland",
'MA'=>"Massachusetts",
'MI'=>"Michigan",
'MN'=>"Minnesota",
'MS'=>"Mississippi",
'MO'=>"Missouri",
'MT'=>"Montana",
'NE'=>"Nebraska",
'NV'=>"Nevada",
'NH'=>"New Hampshire",
'NJ'=>"New Jersey",
'NM'=>"New Mexico",
'NY'=>"New York",
'NC'=>"North Carolina",
'ND'=>"North Dakota",
'OH'=>"Ohio",
'OK'=>"Oklahoma",
'OR'=>"Oregon",
'PA'=>"Pennsylvania",
'RI'=>"Rhode Island",
'SC'=>"South Carolina",
'SD'=>"South Dakota",
'TN'=>"Tennessee",
'TX'=>"Texas",
'UT'=>"Utah",
'VT'=>"Vermont",
'VA'=>"Virginia",
'WA'=>"Washington",
'WV'=>"West Virginia",
'WI'=>"Wisconsin",
'WY'=>"Wyoming"
);
?>
<tr>
<td><b>State:</b></td>
<td><?php
echo'<select name="departure_state[]" class="searchfield_state">';
foreach($state_list as $departure_state){
echo'<option value="'.$departure_state.'">'.$departure_state.'</option>';
}
echo'</select>';
?></td>
<td><b>State:</b></td>
<td><?php
echo'<select name="arrival_state[]" class="searchfield_state">';
foreach($state_list as $arrival_state){
echo'<option value="'.$arrival_state.'">'.$arrival_state.'</option>';
}
echo'</select>';
?></td>
</tr>
<tr>
<td><b>Zip Code:</b></td>
<td><input class="searchfield_state" type="text" name="departure_zipcode[]"></td>
<td><b>Zip Code:</b></td>
<td><input class="searchfield_state" type="text" name="arrival_zipcode[]"></td>
</tr>
</table>
</TD>
</TR>
</table>
<INPUT type="button" value="Add Leg" onclick="addRow('dataTrack')"/><br>
</form>
<input class="submit" type="submit" value="Submit"/>
</td>
</tr>
</table>
</body>
</html>
You need to attach your form to the engine:
P.S. Next time, show the rendered HTML vs. your PHP code so we can test or move it to jsFiddle.net
jQuery("#request").validationEngine('attach');P.S. Next time, show the rendered HTML vs. your PHP code so we can test or move it to jsFiddle.net
ASKER
I already have that on line 31 and this is an internal site. Won't be able to open it up to the outside.
We have a bunch of internal stuff too and I sterilize the data and post to jsFiddle when I have issues I need to tackle.
You didn't pass the 'attach' parameter on line 31:
You didn't pass the 'attach' parameter on line 31:
jQuery("#request").validationEngine();ASKER
I made that change and its still not working in Internet Explorer. It works perfect in Chrome and Firefox.
I've never had any problems, exactly what is it doing? You sure you can't post a renderd page on jsFiddle?
Or at least hit F12 and paste any error messages here
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Takes out all the issues of validation