插入日期选择器后Jquery表单验证不起作用
我想创建一个带有日期选择器文本字段、姓名、联系人和bla bla bla bla的预订(预订)表单 当我的表单获得名称输入文本字段、电子邮件输入文本字段、联系人输入文本字段和日期选择器时,验证工作正常 插入jquery日期选择器后,验证不起作用,日期选择器工作正常 谁能帮我一个忙吗插入日期选择器后Jquery表单验证不起作用,jquery,validation,datepicker,Jquery,Validation,Datepicker,我想创建一个带有日期选择器文本字段、姓名、联系人和bla bla bla bla的预订(预订)表单 当我的表单获得名称输入文本字段、电子邮件输入文本字段、联系人输入文本字段和日期选择器时,验证工作正常 插入jquery日期选择器后,验证不起作用,日期选择器工作正常 谁能帮我一个忙吗 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/validation.js"
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/validation.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<link type="text/css" href="css/start/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<form id="test" action="#" method="get">
<fieldset>
<!--<legend>Form</legend>-->
<div class="form-row">
<div class="field-label">
<label for="name-t2">*Your Name:</label>
</div>
<div class="field-widget"><input name="name-t2" id="name-t2" class="required" title="Enter your name" /></div>
</div>
<div class="form-row">
<div class="field-label"><label for="email-t2">*Your Email:</label></div>
<div class="field-widget"><input name="email-t2" id="email-t2" class="required validate-email" title="Enter a correct email. E.g. xx@example.com" /></div>
</div>
<div class="form-row">
<div class="field-label"><label for="contact-t2">Contact Number:</label></div>
<div class="field-widget"><input name="contact-t2" id="contact-t2" class="validate-digits" title="Enter your contact number" /></div>
</div>
<div class="form-row">
<div class="field-label"><label for="datepicker">Departure Date:</label></div>
<div class="field-label">
<input id="datepicker" name="datepicker" class="required validate-date-au" type="text" />
</div>
</div>
<div class="form-row">
<div class="field-label"><label for="ppl-t2">Number of People:</label></div>
<div class="field-label"><input name="ppl-t2" id="ppl-t2" class="validate-number" title="Optional: Enter number of people" /></div>
</div>
<div class="form-row">
<div class="field-label"><label for="budget-t2">Your Budget:</label></div>
<div class="field-widget">
<select id="budget-t2" name="budget-t2" class="validate-selection" title="Choose your budget">
<option>Select one...</option>
<option>< $100</option>
<option>$100 - $250</option>
<option>$250 - $500</option>
<option>$500 - $750</option>
<option>$750 - $1,000</option>
<option>> $1,000</option>
</select>
</div>
</div>
<div class="form-row">
<div class="field-label"><label for="enquiry-t2">Special Enquiry:</label></div>
<div class="field-label">
<input type="checkbox" name="enquiry-t2" id="enquiry-travel" value="Travel" />Travel<br>
<input type="checkbox" name="enquiry-t2" id="enquiry-accommadation" value="Accommodation" />Accommodation<br>
<input type="checkbox" name="enquiry-t2" id="enquiry-flight" value="Flight Ticket" />Flight Ticket<br>
<input type="checkbox" name="enquiry-t2" id="enquiry-other" value="Others" class="validate-one-required" />Others
</div>
</div>
<div class="form-row">
<div class="field-label-textarea"><label for="comment-t2">Your Message:</label></div>
<div class="field-label-textarea">
<TEXTAREA NAME="comment-t2" id="comment-t2" class="required" cols=55 rows=10></TEXTAREA>
</div>
</div>
</fieldset>
<input type="submit" value="Submit" /> <input type="button" value="Reset" onClick="valid.reset(); return false" />
</form>
<script type="text/javascript">
var valid2 = new Validation('test', {useTitles:true});
</script>
$(函数(){
$(“#日期选择器”).datepicker();
});
*您的姓名:
*您的电子邮件:
联络电话:
出发日期:
人数:
你的预算:
选择一个。。。
< $100
$100 - $250
$250 - $500
$500 - $750
$750 - $1,000
> $1,000
特别查询:
旅行
住宿
机票
其他
您的留言:
var valid2=新验证('test',{usetrients:true});
JQuery和Prototype可能在“$”上发生冲突
尝试:
var$j=jQuery.noConflict()
$j(函数(){
$j(“#datepicker”).datepicker();
});
在我的datepicker函数中插入以下代码之后,datepicker
格式不起作用,JQuery验证工作正常:
var$j=jQuery.noConflict()
$j(函数(){
$j(“#datepicker”).datepicker();
});
首先加载JQuery,然后对其命名,然后加载原型。正如其他人指出的,您可以使用以下函数命名JQuery:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<link type="text/css" href="css/start/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<script type="text/javascript">
var myJQ = JQuery.noConflict();
</script>
<!-- now load Prototype -->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/validation.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<!-- now you can't use $ anymore for JQuery, but you can use 'myJQ' -->
<script>
myJQ(function() {
myJQ( "#datepicker" ).datepicker();
});
</script>
var myJQ=JQuery.noConflict();
myJQ(函数(){
myJQ(“#datepicker”).datepicker();
});
没有测试它,但它应该这样工作。。。祝你好运为了解决这个问题,我将jQuery datepicker的实现替换为此处的实现 这只是jquery datepicker的一个扩展,但是有额外的验证,效果非常好
优秀的图书馆 代码的问题在于jquery库和原型库相互冲突 许多JavaScript库使用“$”作为函数或变量名,就像jQuery一样。这里jquery和prototype库因“$”而冲突。在jQuery中,$只是“jQuery”的别名。要修复此问题,请在无冲突模式下添加jquery
jQuery.noConflict();
包括所有jquery代码,如下所示:
(function($) {
//jquery code goes here.
})(jQuery);
请参阅完整的代码:
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$("#datepicker").datepicker();
})(jQuery);
</script>
jQuery.noConflict();
(函数($){
$(“#日期选择器”).datepicker();
})(jQuery);
上述过程将确保jquery不会与您的其他库(即本例中的原型)发生冲突。我在此处滚动浏览了答案,并与其他库一致,需要jquery.noConflict()。看起来您正在使用prototype和jquery。有冲突的语法。由于您在调用prototype之后调用了jQuery,所以在某种意义上,您的应用程序将使用jQuery覆盖prototype 从迪帕利的回答来看。。如果你用这个
<script type="text/javascript">
var $j = jQuery.noConflict()
$j(function() {
$j("#datepicker").datepicker();
});
var$j=jQuery.noConflict()
$j(函数(){
$j(“#datepicker”).datepicker();
});
并将其替换(从您原来的帖子):
$(函数(){
$(“#日期选择器”).datepicker();
});
原型和jquery将协调工作。另外请注意,您在页面上执行的任何进一步的jquery都需要在其前面加$j,而不仅仅是$您只需要将请求设置为
Post
请求,而不是Get
请求。当您使用表单时,您希望将表单中的数据发送到可能处理数据的服务器,因此它必须是POST而不是Get。
我想这是您需要进行的唯一更改,以使验证工作正常。检查此JSIDLE:只需在datepicker中添加onClose
$('#date').datepicker({
onClose: function() {
$(this).valid();
}
});
你的意思是,当与jQuery datepicker一起使用时,原型验证不起作用!以前遇到过这个问题。我认为
可以确保同时使用多个jquery库。
应该是防止jquery成为窗口。$
。至少在以前的版本中,您不能加载多个JQuery,但是有noConflict
。(这是Resig 2007年的目标之一,请参见:)
<script type="text/javascript">
var $j = jQuery.noConflict()
$j(function() {
$j("#datepicker").datepicker();
});
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
$('#date').datepicker({
onClose: function() {
$(this).valid();
}
});