jquery.validation plugin and .load command
Hi.
I am hoping that someone can tell me what I am doing incorrectly. I want to use the jquery.validate plugin to validate 3 different forms. So I have put these 3 forms in a directory and I would like to include or rather .load them into a corresponding html page. The jquery.validate plugin works fine in its own html page, but It doesn't work when I include this html page in another. Why is this happing? does $ not handle complex includes?
standalone form
<code>
<html>
<head>
<title>Form 1 - Issue Identification</title>
<link href="css/styleSheet.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/validate_watershed_forms.js" type="text/javascript"></script>
</head>
<body>
<form id="issue_identification" action="" method="post">
<div class="error" style="display:none;">
<img src="images/warning.gif" alt="warning" width="24" height="24" style="float:left; margin: -5px 10px 0px 0px;"/>
<span></span>. <br clear="all" />
</div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="label" style="vertical-align:top; padding-top: 8px;"></td>
<td class="field" style="font-weight: normal">
<div class="personal_information_control">
<input type="checkbox" id="personal_information" class="toggleCheck" checked="checked" style="width: auto;" tabindex="1"/>
<label for="personal_information" style="cursor:pointer">Include personal information.</label>
</div>
</td>
</tr>
<!-- generic personal information section -->
<tr class="subTable">
<td colspan="2"
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" class="subTableDiv">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="label"><label for="first_name">First Name:</label></td>
<td class="field">
<input maxlength="30" name="first_name" type="text" class="personal_information_required" tabindex="2" value="" />
</td>
</tr>
<tr>
<td class="label"><label for="last_name">Last Name:</label></td>
<td class="field">
<input maxlength="50" class="personal_information_required" name="last_name" type="text" tabindex="3" value="" />
</td>
</tr>
<tr>
<td class="label"><label for="email">Email:</label></td>
<td class="field">
<input type="text" maxlength="50" class="personal_information_required" name="email" value="" tabindex="4"/>
<div class="formError"></div>
</td>
</tr>
<tr>
<td class="label"><label for="phone">Phone:</label></td>
<td>
<input maxlength="14" class="personal_information_required" name="phone" value="" tabindex="5"/>
</td>
</tr>
</table>
</div>
</td>
</tr><!-- end generic personal information section -->
<!-- form specific text fields -->
<tr>
<td class="label">
<label for="issue_comments">
I'd like to protect or I'm concerned about this land or water related issue in
my watershed:
</label>
</td>
<td class="field">
<textarea class="required" id="issue_comments" name="issue_comments" tabindex="6"></textarea>
</td>
</tr>
<tr>
<td class="label">
<label for="location">Please indentify the location or waterbody.</label>
</td>
<td class="field">
<input type="text" class="required" id="location" name="location" tabindex="7"></textarea>
</td>
</tr>
<tr>
<td class="label">
<label for="success_measure">
We've been successful when:
</label>
</td>
<td>
<textarea name="success_measure" id="success_measure" tabindex="8"></textarea>
</td>
</tr>
<tr>
<td>
<div class="buttonSubmit">
<span></span>
<input class="formButton" type="submit" value="Finish" style="width: 180px" tabindex="9"/>
</div><br clear="all"/>
</td>
</tr>
</table>
</form>
<br clear="all"/>
</body>
</html>
</code>
html page that includes the form
<code>
<div id="form_container"></div>
<script type="text/javascript">
$(function() {
$("#form_container").load("../watershed_forms/form1_issue_identification.html");
});
</script>
</code>
Any suggestions greatly appreciated.
Thanks,
Michael