[jQuery] jquery Plugin Validation + jquery Form Plugin
I have a problem using two plugins with Jquery :
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
and
http://www.malsup.com/jquery/form/#code-samples
I have a form where I need to check if fields are wrong or not (with
jquery Plugin Validation).
When the form is submitted and all fields ok, I need to load a page
into a div ('#response) using ajaxSubmit (from
http://www.malsup.com/jquery/form/#code-samples).
Here is my code :
jQuery(function() {
$('#response').css({ display: "none"});
var container = $('div#errors');
$("#Form1").validate({
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: 'li',
meta: "validate",
submitHandler: function(form) {
$(form).ajaxSubmit({
target: "#response"
});
$('#response').show();
}
});
});
The code above works very fine everywhere.
But... the content into the div called is also another form, whitch
get POST datas from the first form.
If contents are shown right in IE and FF, it is as if IE didn't load
the javascript included in the ajax content loaded.
I have absolutly no errors with Firebug and js console, but IE tells
me there are errors.
Here is the content of the div loaded :
<script type="text/javascript" src="includes/js/paiement.js"></script>
<div>
<div style="float:right;">
<img src="images/icons/close.png" alt="close" id="reset" />
</div>
<form action="#" method="post" id="FormPaiement">
fields of form are here, I don't detail them
</form>
</div>
And here is the content of paiement.js :
$(document).ready(function() {
var container = $('div#errorsFormPaiement');
$("#FormPaiement").validate({
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: 'li',
meta: "validate",
submitHandler: function(form) {
alert('everything is ok, félicitations !');
}
});
$("#reset").click(function() {
$("#FormPaiement").resetForm();
$('#response').hide();
});
});
What is the problem with IE ?
When I click on #reset element, IE does not do anything, and when i
submit empty form, it does not validate the second form.
It is as if js is not loaded.
I tried to include js in anothers ways, encapsuled into <script> and </
script>, or included in the head of my main page, but nothing more
better.
What did I do wrong for it does not work in IE ?
Sorry for my english, I hope you can understand everything as I tried
to explain them.