Jquery newbee - confusing problem?
Hello to all,
it`s nice to be part of JQ community, even for a total beginner, some great and helpful stuff I`ve found here!
This is probably stupid question, It`s a matter of validation form plug in.
This is code from my html :
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
<script src="jq/js/jquery-latest.js"></script>
<script type="text/javascript" src="jq/js/jquery.validate.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="images/fav.png" rel="shortcut icon" type="image/png" />
<link type="text/css" rel="stylesheet" href="css/style.css">
<link href="css/slider.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/typography.css" rel="stylesheet" type="text/css" media="screen">
<link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jq/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="jq/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jq/js/jquery-ui-1.8.4.custom.min.js"></script>
<script src="jq/jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("input, textarea, select, button").uniform();
});
</script>
<link rel="stylesheet" href="css/uniform.default.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jq/jQuery.js"></script>
<script type="text/javascript" src="jq/jquery_004.js"></script>
<script type="text/javascript" src="jq/thickbox.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("6.0.0")) {
var fn = function() {
var att = { data:"images/slider.swf", width:"679", height:"70", menu:false };
var par = { flashvars:"testvar=123"};
var id = "replaceMe";
var myObject = swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
}
</script>
<script type="text/javascript">
$(function() {
var dates = $('#from, #to').datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
</script>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script></head><body>
<form id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
A lot`s of Jquery stuff, isn`t it, and It all worked well except validation form plugin. I can`t get it to work with all the other JQ scripts I use. It only works when there is only code for validation form, like this:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AmpAds.com - Electric Ads Home</title>
<script src="jq/js/jquery-latest.js"></script>
<script type="text/javascript" src="jq/js/jquery.validate.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="index, follow">
<meta name="keywords" content="advertising, online ads, advertiser, publisher, application, network, software, platform, online">
<meta name="description" content="AmpAds, Home of online ads. Your Self-Serve ad reaches engaged users in content it self along with the traditional online advertising. ">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link href="images/fav.png" rel="shortcut icon" type="image/png" />
<link type="text/css" rel="stylesheet" href="css/style.css">
<link href="css/slider.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/typography.css" rel="stylesheet" type="text/css" media="screen">
<link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head><body>
<form id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
So, as I can figure this out, looks like there could be some kind of collision between those *.js files and scripts? Or I`m missing something else, like call order of the js files or scripts?
Please help me to understand this...
Thank you all!