我已经在这里和其他地方尝试了无数的建议,但没有任何作用,所以请任何人都可以了解我的代码失败的原因。
Ajax调用创建的html是(选择的内容被隐藏但是所有内容都被正确关闭)
<div id="adc" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 46px; max-height: none; height: auto;">
You must complete fields marked *.
<br>
<br>
<form id="addcont" ;="" autocomplete="off" name="addcont">
<fieldset>
Type of contractor/supplier:
<select id="otype" name="org_type">
<div id="orgnm" class="hideonload" style="display: block;">
* Full name of organisation:
<input id="full_name" class="required" type="text" size="50" value="" name="full_name">
<br>
<span id="flagger"></span>
<input type="hidden" value="test" name="dbextn">
<input type="hidden" value="1" name="princip">
*Business Group:
<br>
<select id="bgroup" name="busn_group">
<br>
<div id="clasdiv" class="hideonload" style="display: block;">
* Business Class:
<select id="bclass" name="busn_clas">
</div>
<div id="typediv" class="hideonload" style="display: block;">
<br>
<div id="locat" class="hideonload" style="display: block;">
The location you add MUST be that of the master contact address.
<br>
<table id="loc-add">
<tbody>
<tr>
<td width="100px">
<strong>Principal address</strong>
:
</td>
<td width="500px">
<select id="loc_type" name="loc_type">
</td>
</tr>
<tr>
<td>Location name:</td>
<td>
<input id="locat_name" type="text" placeholder="You must give the location a name" size="40" value="" name="locat_name">
</td>
</tr>
<tr>
<td>*Address line1:</td>
<td>
<input id="address1" class="required" type="text" size="40" value="" name="address1">
<input type="hidden" value="1" name="status">
</td>
</tr>
<tr>
<td>Address line2:</td>
<td>
<input id="address2" type="text" size="40" value="" name="address2">
</td>
</tr>
<tr>
<td>*Town :</td>
<td>
<input id="town" class="required" type="text" size="40" value="" name="town">
</td>
</tr>
<tr>
<td>*Postcode:</td>
<td>
<input id="postcode" class="required" type="text" size="10" value="" name="postcode">
</td>
</tr>
<tr>
<td>County:</td>
<td>
<select name="county">
</td>
</tr>
<tr>
<td> Country:</td>
<td>
<select id="country" name="country">
</td>
</tr>
<tr>
<td>*Phone no:</td>
<td>
<input id="phone" class="required" type="text" size="15" value="" name="phone">
<br>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</fieldset>
</form>
</div>
我可以从Firebug看到包含验证程序的核心库正在加载。
我的jquery脚本是:
$(document).ready(function(){
$('.nextbut').hide();
$(document).on('click','a.addcontr', function (e) {
e.preventDefault();
var organid=$('#basinf').attr("parn");
var usrd = $('#basinf').attr("pare");
var dbextn = $('#basinf').attr("dbextn");
var parf = $('#basinf').attr("parf");
var $tag = $("<div id='adc'><img src='images/loading.gif'></div>");
$.post("ajax/createContractor.php",
{organid: organid, dbextn: dbextn, parf: parf},
function(data) {
$tag.html(data).dialog({autoOpen: false, title: "Adding a contractor",
width: 540,
modal: true,
buttons: {
"Add Contractor" : function() { $('#addcont').validate({debug: true ,
rules:{
full_name: "required",
locat_name: "required",
address1:"required",
town:"required",
postcode:"required"
},
messages: {
full_name: " Enter name of organisation",
locat_name: " Enter location name",
address1: " Enter address",
town: " Enter town or city",
postcode: " Enter postcode"},
submitHandler:function(){$.post("ajax/insContractor.php",$('#addcont').serialize(),function(data){
$( '#adc' ).dialog( "close" );});}
});
},
"Cancel": function() {
$( this ).dialog( "close" );
}
},
close: function() {$('#addcont').remove();
$('#adc').remove();
}}).dialog('open');
});$('#addcont').validate();
});
});
我已尝试将验证调用放在任何地方,包括通过打开:
function(event, ui){$('#addcont').validate();}, just after modal: true,
答案 0 :(得分:0)
我看到你正在呼叫$('#addcont').validate(...)
两次。您无法多次调用它。
.validate()
方法仅用于初始化表单上的插件。 .validate()
方法是您选择的方法。您不能多次调用它,因此您无法通过再次调用来添加,覆盖或删除选项。后续调用将被忽略。
当您致电.validate()
时,表单的HTML 必须已存在。在大多数情况下,它在DOM ready事件处理程序中调用。在动态创建表单的情况下,在创建表单的HTML之后立即调用它。
否则,我将依靠你构建一个jsFiddle来重现问题,以便我们有一些东西可以检查和排除故障。
触发您的ajax以在对话框中创建表单。
完全构建HTML后,再调用.validate()
方法和选项。
再次查看代码,您需要完全删除.validate()
选项中的buttons:
方法。由于validate插件会自动捕获提交按钮,因此您无需执行任何特殊操作。
只需将已删除的.validate()
中的验证规则和选项复制到最后的.validate()
方法中。
答案 1 :(得分:-1)
有很多关于动态创建表单和使用parent()和appendTo()在DOM中移动对话框的建议但最后我回到plugin page并决定保留验证声明并在对话框按钮内触发,但以编程方式执行。
我设置了一个要检查的表单id的变量,然后在验证成功时使用if语句发送表单。在DOM中存在的任何地方都以某种方式工作,所以一个快乐的兔子。至少我能理解发生了什么!
$(document).ready(function(){
$(document).on('click','a.addcontr', function (e) {
e.preventDefault();
var organid=$('#basinf').attr("parn");
var usrd = $('#basinf').attr("pare");
var dbextn = $('#basinf').attr("dbextn");
var parf = $('#basinf').attr("parf");
var $tag = $("<div id='adc'><img src='images/loading.gif'></div>");
$.post("ajax/createContractor.php",
{organid: organid, dbextn: dbextn, parf: parf},
function(data) {
$tag.html(data).dialog({
autoOpen: false, title: "Adding a contractor",
width: 540,
modal: true,
buttons: {
"Add Contractor" : function() {
var validator=$('#addcont').validate({
rules:{
full_name: "required",
locat_name: "required",
address1:"required",
town:"required",
postcode:"required"
},
messages: {
full_name: " Enter name of organisation",
locat_name: " Enter location name",
address1: " Enter address",
town: " Enter town or city",
postcode: " Enter postcode"}
});
if(validator.form()){$.post("ajax/insContractor.php",$('#addcont').serialize(),function(data){
$( '#adc' ).dialog( "close" );
});}
},
"Cancel": function() {
$( this ).dialog( "close" );
}
},
close: function() {$('#addcont').remove();
$('#adc').remove();
},
}).dialog('open');
});
});
});