JQueryValidation-动态字段似乎破坏了验证

JQuery Validation - dynamic fields seem to break validation

本文关键字:坏了 验证 动态 字段 JQueryValidation-      更新时间:2023-09-26

我有这个:

<div id="FormContainer">
    <button type="button" data-action="PrintWeightRange">Add Weight Range</button>
    <form id="DynamicForm" action="php/printinputs.php" method="POST">
        <!-- Fields are loaded in via JQuery and AJAX -->
    </form>
</div>

其他函数将输入和按钮附加到表单。当单击提交按钮时,JQuery绑定的函数会将字段附加到表单中。

填充时的表单如下所示:

<div id="FormContainer">
<button type="button" data-action="PrintWeightRange">Add Weight Range</button>
<form id="DynamicForm" action="php/printinputs.php"
method="POST">
    <button type="button" data-action="FormSubmit">Submit</button>
    <fieldset data-purpose="ShippingMethodDetails">
        <input type="text" value="Express Shipping" data-purpose="ShippingMethodName">
        <select data-purpose="ShippingMethodType">
            <option value="">Select a Shipping Method Type</option>
            <option value="opt1">Fixed</option>
            <option value="opt2">Weight and Location Based</option>
        </select>
        <select data-purpose="ShippingMethodCountry">
            <option value="">Select a Location</option>
            <option value="opt1">Country 1</option>
            <option value="opt2">Country 2</option>
            <option value="opt3">Country 3</option>
        </select>
        <select data-purpose="ShippingMethodRegion">
            <option value="">Select a Region</option>
            <option value="opt1">Region 1</option>
            <option value="opt2">Region 2</option>
            <option value="opt3">Region 3</option>
        </select>
    </fieldset>
    <fieldset data-purpose="ShippingMethodWeightRange">
        <input data-purpose="LowerWeight" type="number">
        <select data-purpose="WeightRangeType" data-action="ChangeWeightRangeType">
            <option value="andup">and up</option>
            <option value="to" selected="selected">to</option>
        </select>
        <input data-purpose="UpperWeight" type="number">
        <input data-purpose="WeightRangePrice" type="number">
        <button type="button" data-action="RemoveThis">Remove</button>
    </fieldset>
</form>

button[data-action='SubmitForm']绑定了一个函数,该函数使用JQuery each()函数循环遍历表单中的所有选择和输入,并将它们添加到两个对象中——DynamicFormValidationRules用于传递给JQuery Validation,DynamicFormAjaxData用于AJAX表单post。

DynamicFormValidationRules = {
    "Fieldset1_ShippingMethodDetails_ShippingMethodName": {
        "required": true
    },
    "Fieldset1_ShippingMethodDetails_ShippingMethodType": {
        "required": true
    },
    "Fieldset1_ShippingMethodDetails_ShippingMethodCountry": {
        "required": true
    },
    "Fieldset1_ShippingMethodDetails_ShippingMethodRegion": {
        "required": true
    },
    "Fieldset2_ShippingMethodWeightRange_LowerWeight": {
        "required": true
    },
    "Fieldset2_ShippingMethodWeightRange_WeightRangeType": {
        "required": true
    },
    "Fieldset2_ShippingMethodWeightRange_UpperWeight": {
        "required": true
    },
    "Fieldset2_ShippingMethodWeightRange_WeightRangePrice": {
        "required": true
    }
}
DynamicFormAjaxData = {
ShippingMethodDetails1_Fieldset1_ShippingMethodDetails_ShippingMethodCountry: ""
ShippingMethodDetails1_Fieldset1_ShippingMethodDetails_ShippingMethodName: "Express Shipping"
ShippingMethodDetails1_Fieldset1_ShippingMethodDetails_ShippingMethodRegion: ""
ShippingMethodDetails1_Fieldset1_ShippingMethodDetails_ShippingMethodType: ""
ShippingMethodWeightRange2_Fieldset2_ShippingMethodWeightRange_LowerWeight: ""
ShippingMethodWeightRange2_Fieldset2_ShippingMethodWeightRange_UpperWeight: ""
ShippingMethodWeightRange2_Fieldset2_ShippingMethodWeightRange_WeightRangePrice: ""
ShippingMethodWeightRange2_Fieldset2_ShippingMethodWeightRange_WeightRangeType: "to"
}

在将所有这些值整理到对象中之后,我调用validate函数:

$("#DynamicForm").validate({
    rules: DynamicFormValidationRules,
    submitHandler : ValidateDynamicFormHandler,
});

它第一次按预期进行验证。

然而,当我将另一个运输方法添加到表单中,并再次调用函数时,新字段不会被拾取并标记为有效,即使它们不是:

DynamicFormValidationRules = {
    "Fieldset1_ShippingMethodDetails_ShippingMethodName": {
        "required": true
    },
    "Fieldset1_ShippingMethodDetails_ShippingMethodType": {
        "required": true
    },
    "Fieldset1_ShippingMethodDetails_ShippingMethodCountry": {
        "required": true
    },
    "Fieldset1_ShippingMethodDetails_ShippingMethodRegion": {
        "required": true
    },
    "Fieldset2_ShippingMethodWeightRange_LowerWeight": {
        "required": true
    },
    "Fieldset2_ShippingMethodWeightRange_WeightRangeType": {
        "required": true
    },
    "Fieldset2_ShippingMethodWeightRange_UpperWeight": {
        "required": true
    },
    "Fieldset2_ShippingMethodWeightRange_WeightRangePrice": {
        "required": true
    },
    "Fieldset3_ShippingMethodWeightRange_LowerWeight": {
        "required": true
    },
    "Fieldset3_ShippingMethodWeightRange_WeightRangeType": {
        "required": true
    },
    "Fieldset3_ShippingMethodWeightRange_UpperWeight": {
        "required": true
    },
    "Fieldset3_ShippingMethodWeightRange_WeightRangePrice": {
        "required": true
    }
}

以下是相关的JavaScript:

function FormSubmit(event) {
    AssignFieldIDs()
}
function AssignFieldIDs() {
    console.log("AssignFieldIDs()");
    var myReturn = {};
    var NumFieldsets = $("#DynamicForm").find("fieldset").length;
    $("#DynamicForm").find("fieldset").each(function(index, element){
        var myFieldset = element;
        var myFieldsetIndex = index;
        var myFieldsetNumber = myFieldsetIndex + 1;
        var myFieldsetPurpose = $(element).attr("data-purpose");
        var myFieldsetName;
        if (NumFieldsets > 1) {
            myFieldsetName = myFieldsetPurpose + myFieldsetNumber
        } else {
            myFieldsetName = myFieldsetPurpose;
        }
        console.log(element);
        $(myFieldset).attr("id", "Fieldset" + myFieldsetNumber + "_" + myFieldsetPurpose);
        $(myFieldset).find("input, select, textarea").each(function(index,element){
            myField = element
            myFieldIndex = index;
            myFieldNumber = index + 1;
            myFieldPurpose = $(element).attr("data-purpose");
            myFieldName = "Fieldset" + myFieldsetNumber + "_" + myFieldsetPurpose + "_" + myFieldPurpose; //+ myFieldsetNumber;
            // $(element).attr("name", myFieldsetName + "_" + myFieldName);
            $(element).attr("name", myFieldName);
            $(element).attr("id", myFieldName);
            DynamicFormAjaxData[myFieldsetName + "_" + myFieldName] = $(myField).val();
            DynamicFormValidationRules[myFieldName] = {required : true};
        }); 
    });
    PrepareFormValues();
}
function PrepareFormValues(event) {
    console.log("PrepareFormValues()")
    console.log("DynamicFormAjaxData")
    console.log(DynamicFormAjaxData)
    console.log("DynamicFormValidationRules");
    console.log(DynamicFormValidationRules);
    $("#DynamicForm").validate({
        rules: DynamicFormValidationRules,
        submitHandler : ValidateDynamicFormHandler,
    });
    console.log('$("#DynamicForm").valid()');
    console.log($("#DynamicForm").valid());
    if ($("#DynamicForm").valid() === true ) {
        $("#DynamicForm").submit();
    }
    else
    if ($("#DynamicForm").valid() === false ) {
    }

}

感谢阅读!

非常感谢@SSA引导我找到答案。

我没有使用JQuery函数将所有规则附加到对象并传递,而是使用JQueryValidate的rules()方法分别为每个字段添加规则。

function AssignFieldIDs() {
    console.log("AssignFieldIDs()");
    var NumFieldsets = $("#DynamicForm").find("fieldset").length;
    // Form is validated here, without rules
    $("#DynamicForm").validate({
        submitHandler : ValidateDynamicFormHandler,
    });
    $("#DynamicForm").find("fieldset").each(function(index, element){
        var myFieldset = element;
        var myFieldsetIndex = index;
        var myFieldsetNumber = myFieldsetIndex + 1;
        var myFieldsetPurpose = $(element).attr("data-purpose");
        var myFieldsetName;
        if (NumFieldsets > 1) {
            myFieldsetName = myFieldsetPurpose + myFieldsetNumber;
        } else {
            myFieldsetName = myFieldsetPurpose;
        }
        console.log(element);
        $(myFieldset).attr("id", "Fieldset" + myFieldsetNumber + "_" + myFieldsetPurpose);
        $(myFieldset).find("input, select, textarea").each(function(index,element){
            // Creates temporary vars for field naming in the objects.
            myField = element;
            myFieldIndex = index;
            myFieldNumber = index + 1;
            myFieldPurpose = $(element).attr("data-purpose");
            myFieldName = "Fieldset" + myFieldsetNumber + "_" + myFieldsetPurpose + "_" + myFieldPurpose; //+ myFieldsetNumber;
            // Sets names and ids in the HTML for use by the 
            $(element).attr("name", myFieldName);
            $(element).attr("id", myFieldName);
            // Validates each field.
            $(element).rules("add", {required:true});
            // Adds to an object for making an AJAX post.
            DynamicFormAjaxData[myFieldsetName + "_" + myFieldName] = $(myField).val();

        }); 
    });
    PrepareFormValues();
}