Question

我克隆了我的fieldset，它完美无缺。我完全清楚所有领域的价值。我遇到的唯一问题是，如果在添加新字段集之前提交已提交，则遵循规则，如果您没有点击提交，则为否。我真正想要的是能够删除所有规则并重新设置或保持规则正常工作。我试图删除规则，它没有工作（）。我尝试添加新规则，它可以工作，但每次添加一个部分时，每个字段还有1个规则。请注意，每次添加新字段集时，我的ID和名称都会更改。

这是我的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> &nbsp; &nbsp;</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，任何帮助将不胜感激：

$(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);
    });

});

Answer 1

在几个地方你有class="required" 是你输入元素里面的问题。但是，您的class元素中包含此<label>，因此我们可以将其排除在外。

jQuery Validate在每个输入上都需要唯一的name属性，所以即使你不小心重复了这些名称，jQuery Validate也只能在每个元素的第一个实例上工作，而不能在克隆上工作......如果调用.validate()时，元素不存在，您可以完全排除.validate()方法的原因。

在调用.validate()之后，在动态创建的元素上声明规则的唯一方法如下......

使用the .rules('add') method（虽然为什么你会添加你说你不想要的规则，我在你的代码中没有看到这个）
使用内联HTML 5验证属性，例如required="required"。（我在你的代码中没有看到这些）
使用内联class声明，例如class="required"。（同样，你只在<label>元素上执行此操作）

换句话说，我在代码中看不到任何会导致任何验证规则进入动态创建或克隆元素的内容。要么你忽略了向我们展示代码导致问题，或者你错了你所看到的。

使用浏览器的开发人员工具检查DOM，并验证克隆的标记是否符合您的意图，并且您没有上述＃2和＃3中所述的任何属性或类。

如果您已尝试.rules('remove')并且失败了as per documentation，则此方法“...仅操纵通过rules-option或rules('add')指定的规则”。换句话说，您只能使用.rules('remove')删除.validate()或.rules('add')方法规定的规则。

请注意，.rules('remove')只能附加到代表单个输入元素的选择器...

$('#singleInput').rules('remove');     // <- ONE input

否则，如果您的选择器以一组元素为目标，则需要将其包装在jQuery .each()中......

$('.groupOfInputs').each(function() {  // <- multiple inputs
    $(this).rules('remove');
});

修改：

根据评论中发布的jsFiddle，您可以看到实际发生的情况。

您从原始部分克隆的规则没有问题，您的问题确实与规则完全无关。问题是您正在克隆错误消息本身...错误消息仅用于原始元素集。你真的需要重新思考你的整个方法，因为我甚至不了解在这里克隆任何东西的优势。

由于您已经不遗余力地重命名所有内容，只需使用jQuery为每个部分编写所有新标记，而不是盲目地克隆包含动态内容的内容，例如您甚至不需要/不需要的错误消息。换句话说，只需使用新名称创建新表单元素，而 NOT 创建，克隆或复制来自其他地方的任何动态内容。您的代码实际上会变得简化，因为在首次正确创建时，您不必进行太多的DOM操作。

如何在不保留字段规则的情况下克隆字段集？

1 个答案: