Context: Using Asp.net 2.0 webforms, Jquery 1.3.2 and BlockUI and Validation plugins.
I have a Gridview which is databound with some html buttons and then these buttons are wired up in jquery so that when clicked, blockUI displays a div with various inputs. When the modal is submitted, I am using the Validate plug-in to validate the inputs in the div. However the validation doesn't work.
Digging into this further - I have noticed that the validate plugin doesn't see the inputs in the BlockUI div at all. Using firebug and visual event - it appears that when BlockUI (and i have tried this with thickBox too) displays the div - it actually clones the dom element (in this case the div with inputs) and appends it outside of the form tags in the main page and into the BlockUI divs. So because the div has been cloned and removed and placed somewhere outside of the pages form tag - the inputs aren't inside the form tag and aren't seen by the validate plug-in. Calling isValid() on the validator object returns true but the inputs are not validated..
If anyone has any suggestions please fire back. Code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js?v2.24"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
</head>
<body>
<form class="cmxform" id="commentForm" action="" runat="server">
<asp:PlaceHolder ID="placeHolderForGrid" runat="server"></asp:PlaceHolder>
<div id="divHiddenForm" style="display:none">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" name="email" class="required email" />
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" name="url" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" class="required"></textarea>
</p>
<p>
<input class="button" type="submit" value="Submit" id="Submit1" name="Submit1"/>
<input type="button" value="Cancel" id="cancel_form" name="cancel_form" />
</p>
<p>
<input type="hidden" name="student_key" id="student_key" />
</p>
</fieldset>
<script language="javascript" type="text/javascript">
var bindFormValidate = function() {
$("#Submit1").click(function() {
var $form = $('form#commentForm');
$form.validate();
console.log("Valid: " + $form.valid());
});
};
$(document).ready(function() {
//hide modal
$('#cancel_form').click(function() {
$.unblockUI();
});
//bind showing modal incident window
$('.add_incident').click(function()
{
var $buttonClicked = $(this);
var studentGradeKey = $buttonClicked.attr('key');
//set hidden field
$('input#student_key').val(studentGradeKey);
$.blockUI.defaults.css.cursor = 'auto';
$.blockUI({ message : $('#divHiddenForm') });
//validate adding a new incident
bindFormValidate();
return false;
});
});
</script>
</div>
</form>
</body>
</html>