如何在不保留字段规则的情况下克隆字段集? [英] How can I clone a fieldset without keeping the rules of the fields?
问题描述
我克隆了我的字段集，并且效果很好.我会完美地清除所有字段的值.我唯一遇到的问题是规则，如果在添加新字段集之前就已经点击了提交，那么就遵循了规则，如果您没有在提交时就点击了就没有规则.我真正想要的是能够删除所有规则并再次设置它，或者使规则以它们正常工作的方式保留.我试图删除规则，但没有成功().我尝试添加新规则，但可以，但是每次添加部分时，每个字段又有1条规则.请注意，每次添加新的字段集时，我的ID和名称都会更改.
I cloned my fieldset and it works perfect. I clear all fields value perfectly. The only issue I'm having is the rules follow if submit had been hit before adding the new fieldset and no if you haven't hit on submit. What I really want is to be able to either remove all the rules and set it up again or keep the rules in a way they work properly. I tried to remove the rules and it didn't work (). I tried adding new rules, it works but I have 1 more rule for each field every time I add a section. Note that my IDs and Names changed every time I add a new fieldset.
这是我的html @Sparky:
Here is my html @Sparky:
<!------ Fiedlset company information starts here ------>
<fieldset class="clonableId" id="location1">
<table>
<tr class="align_error">
<td>
<p><label id="lblOwner1" for="propertyOwner1" class="required" >Property Owner</label></p>
</td>
<td>
<p><input type="text" name="propertyOwner1" id="propertyOwner1" /></p>
</td>
</tr>
</table>
<p><label><strong>Excavation Address (Rural Areas Province DIrections)</strong></label></p>
<table>
<tr class="align_error">
<td>
<p><label id="lblexcavAddress1" for="excavAddress1" class="required" >Address</label> </p>
</td>
<td>
<p><input class="address" type="text" name="excavAddress1" id="excavAddress1" /></p>
</td>
<td>
<p><label id="lblexcavCity1" for="excavCity1" class="required" >City</label></p>
</td>
<td>
<p><input type="text" name="excavCity1" id="excavCity1" /></p>
</td>
<td><p><label id="lblexcavProv1" for="excavProv1" class="required" >Province</label></p>
</td>
<td><p>
<select id="excavProv1" name="excavProv1" >
<option></option>
<option>AB</option>
<option>BC</option>
<option>MB</option>
<option>NB</option>
<option>NF</option>
<option>NW</option>
<option>NS</option>
<option>NU</option>
<option>ON</option>
<option>PE</option>
<option>QU</option>
<option>SK</option>
<option>YK</option>
</select>
</p></td>
<td><p><label id="lblzipCode1" for="excavPostCod1" class="required" >Postal Code</label></p></td>
<td>
<p><input type="text" name="excavPostCod1" id="excavPostCod1" class="lilfield55" onchange="postCod()" /></p>
</td>
</tr>
</table>
</fieldset>
<div id="newLoc">
<input type="button" id="addSection" value="Add new Location"> <input type="button" id="btnDel" value="remove Location above">
</div>
<div>
<input class="buttons" type="button" value="Print" onClick="window.print()" /><input id="submit_btn" class="buttons" type="submit" value="Submit" />
</div>
<div>
<button class="remove-rule">remove rule</button>
</div>
<!------ Fieldset Hearing conservation program ends here ------>
</form>
签出我的Jquery，任何帮助将不胜感激:
Check my Jquery out and any help will be appreciated:
$(document).ready(function(){
$("#excavationform").validate({
rules:
{
compName: {
required: true
},
compCity: {
required: true,
},
compAddress: {
required: true
},
compPROV: {
required: true
},
compPostCod:{
required:true
}
},
messages: {
compName: "Enter the company name.",
compAddress: "Enter the company's address",
compCity: "Enter the company city",
compPROV: "Enter the company province",
compPostCod:{
postalcode: "Enter a valid postal code in the format A1A 1A1 (including the space).",
required: "A valid postal code is required"
}
}
});
nameFields("#compName");
nameFields("#compAddress");
nameFields("#compCity");
filterInvalidHHTPPostChar("#compAddress");
filterInvalidHHTPPostChar("#compPostCod");
makeCaps("#compPostCod");
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
});
$(function () {
$("form").on("click","#addSection",function (e) {
e.preventDefault();
var num = $('.clonableId').length, // how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // the numeric ID of the new input field being added
newElem = $('#location' + num).clone(true).attr('id', 'location' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
// manipulate the name/id values of the input inside the new element
// Property Owner - Input
newElem.find('#lblOwner' + num).attr('id', 'lblOwner'+ newNum).attr('for', 'propertyOwner'+ newNum);
newElem.find('#propertyOwner' + num).attr('id', 'propertyOwner'+ newNum).attr('name', 'propertyOwner'+ newNum).val('');
// Excavation Address - Input
newElem.find('#lblexcavAddress' + num).attr('id', 'lblexcavAddress' + newNum).attr('for', 'excavAddress' + newNum);
newElem.find('#excavAddress' + num).attr('id', 'excavAddress' + newNum).attr('name', 'excavAddress' + newNum).val('');
// Excavation City - Input
newElem.find('#lblexcavCity' + num).attr('id', 'lblexcavCity' + newNum).attr('for', 'excavCity' + newNum);
newElem.find('#excavCity' + num).attr('id', 'excavCity' + newNum).attr('name', 'excavCity' + newNum).val('');
// Excavation Province - Input
newElem.find('#lblexcavProv' + num).attr('id', 'lblexcavProv' + newNum).attr('for', 'excavProv' + newNum);
newElem.find('#excavProv' + num).attr('id', 'excavProv' + newNum).attr('name', 'excavProv' + newNum).val('');
// Excavation Postal Code - Input
newElem.find('#lblzipCode' + num).attr('id', 'lblzipCode' + newNum).attr('for', 'excavPostCod' + newNum);
newElem.find('#excavPostCod' + num).attr('id', 'excavPostCod' + newNum).attr('name', 'excavPostCod' + newNum).val('');
// insert the new element after the last "duplicatable" input field
$('#location' + num).after(newElem);
// Allow the datepicker: we delete it first then we re-create it
$('#location' + newNum).on('focus','.dateChooser', function(){
$(this).removeClass('hasDatepicker').datepicker();
});
// focus on the first input of the new section
$('#propertyOwner' + newNum).focus();
///////////////////////////////////////////////////////Add rules
//////////////////////////////////////////////////Control on the new section
nameFields("#propertyOwner" + newNum);
nameFields("#excavAddress" + newNum);
nameFields("#excavCity" + newNum);
numberFields("#MBrfNumber" + newNum);
nameFields("#supervisorName" + newNum);
fieldLength("#propertyOwner" + newNum, 70);
fieldLength("#excavAddress" + newNum, 70);
fieldLength("#excavCity" + newNum, 35);
fieldLength("#excavPostCod" + newNum, 7);
fieldLength("#startDate" + newNum, 10);
fieldLength("#endDate" + newNum, 10);
fieldLength("#MBrfNumber" + newNum, 10);
fieldLength("#supervisorName" + newNum , 70);
/////////////////////////////////////////Dates
// enable the "remove" button
$('#btnDel').attr('disabled', false);
});
$('#btnDel').click(function () {
// confirmation
if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
{
var num = $('.clonableId').length;
// how many "duplicatable" input fields we currently have
$('#location' + num).slideUp('slow', function () {$(this).remove();
// if only one element remains, disable the "remove" button
if (num -1 === 1)
$('#btnDel').attr('disabled', true);
// enable the "add" button
$('#addSection').attr('disabled', false).prop('value', "add section");});
}
return false;
// remove the last element
// enable the "add" button
$('#addSection').attr('disabled', false);
});
});
推荐答案
在某些地方，如果输入元素中包含class="required"，则会会成为问题.但是，您可以在<label>元素中包含此class，因此我们可以排除此情况.
In several places you have class="required" which would be the problem had this been inside of your input elements. However, you have this class inside of your <label> elements, so we can rule that out.
jQuery Validate在每个输入上都需要唯一的name属性，因此，即使您不小心重复了名称，jQuery Validate也只能在每个元素的第一个实例上工作，而不能在克隆上工作...并且如果该元素确实在工作调用.validate()时不存在，则可以完全排除.validate()方法作为原因.
jQuery Validate needs unique name attributes on every input, so even if you accidentally duplicated the names, jQuery Validate would only work on the first instance of each element, not work on the clone... and if the element does not exist when .validate() is called, you can completely rule out the .validate() method as the cause.
在调用.validate()之后，对动态创建的元素声明规则的唯一方法如下...
The only ways to declare rules on dynamically created elements, after .validate() is called, are as follows...
-
使用
.rules('add')方法(尽管为什么要添加规则，但您却说不?不需要，我在您的代码中看不到)
using the
.rules('add')method (although why would you add rules you say you don't want and I don't see this in your code)
使用内嵌HTML 5验证属性(例如required="required"). (我在您的代码中看不到这些内容)
using inline HTML 5 validation attributes such as required="required". (I don't see these in your code)
使用内联class声明(例如class="required"). (同样，您只在<label>元素上执行此操作)
using inline class declarations such as class="required". (Again, you're only doing this on the <label> elements)
换句话说，我在您的代码中绝对看不到任何会导致任何验证规则继承到您动态创建或克隆的元素中的东西.您可能忽略了向我们展示代码导致问题，或者您误以为所见即所得.
In other words, I see absolutely nothing in your code that will cause any validation rules to carry over into your dynamically created, or cloned, elements. Either you've neglected to show us the code causing the problem or you are mistaken about what you're seeing.
使用浏览器的开发人员工具检查DOM，并验证克隆的标记看起来像您想要的那样，并且没有上面#2和#3中所述的任何属性或类.
Inspect the DOM using your browser's developer tools and verify that the cloned markup looks like you've intended and that you don't have any attributes or classes as described in #2 and #3 above.
如果您尝试过.rules('remove')并失败了，请按照文档 进行操作，此方法 "...仅处理通过rules-option或rules('add')" 指定的规则.换句话说，您只能使用.rules('remove')删除由.validate()或.rules('add')方法设置的规则.
If you've tried .rules('remove') and it's failed, as per documentation, this method "...manipulates only rules specified via rules-option or via rules('add')". In other words, you can only use .rules('remove') to remove rules put in place by the .validate() or .rules('add') methods.
请记住，.rules('remove')只能附加到表示单个输入元素的选择器上...
Keep in mind that .rules('remove') can only be attached to a selector representing a single input element...
$('#singleInput').rules('remove'); // <- ONE input
否则，如果选择器定位到一组元素，则需要将其包装在jQuery .each() ...
Otherwise, if your selector targets a groups of elements, you'll need to wrap it within a jQuery .each()...
$('.groupOfInputs').each(function() { // <- multiple inputs
$(this).rules('remove');
});
编辑:
根据评论中发布的 jsFiddle ，您可以了解实际情况.
As per the jsFiddle as posted in the comments, you can see what's really happening.
对于从原始部分克隆的规则，您没有任何问题，而您的问题确实与规则毫无关系.问题是您正在克隆错误消息本身...错误消息仅适用于原始元素集.您真的需要重新考虑整个方法，因为我什至都不了解在此处克隆任何内容的好处.
You are not having an issue with rules being cloned from the original section, and your issue really has absolutely nothing to do with rules. The issue is that you're cloning the error messages themselves... error messages only intended for the original set of elements. You really need to re-think your whole approach as I don't even understand the advantage to cloning anything here.
由于您已经竭尽全力来重命名所有内容，因此只需使用jQuery为每个部分编写所有新标记，而不是盲目地克隆包括动态内容的内容，例如您甚至不需要/不需要的错误消息.换句话说，只需使用新名称创建新的表单元素，而不创建，克隆或复制其他任何动态内容.实际上，您的代码将得到简化，因为一开始就可以正确地创建代码，而无需进行太多的DOM操作.
Since you already go to great lengths to rename everything, simply use jQuery to write all new markup for each section rather than blindly cloning things that include dynamic content like error messages you don't even want/need. In other words, just create the new form elements with their new names, while NOT creating, cloning or copying any dynamic content from elsewhere. Your code will actually become simplified since you won't have to do so much DOM manipulation when it's being created properly in the first place.
这篇关于如何在不保留字段规则的情况下克隆字段集?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
