使用 jquery 验证器验证两个字段

Question

我想使用验证器插件方法来验证这两个字段，例如及格分数总是低于满分。

注意:: 我的 Html 字段是动态的，所以不认为是单个字段。

这是我的 Html 字段下方。

<td>
  <div class="form-group">

      <input type="text" name="fmark_<?php echo $value['id'] ?>" class="form-control" id="fmark_<?php echo $value['id'] ?>" value="<?php echo $value['full_marks'] ?>" placeholder="Enter Full Marks">
  </div>
</td>
<td>
  <div class="form-group">

      <input type="text" name="pmarks_<?php echo $value['id'] ?>" class="form-control" id="pmarks_<?php echo $value['id'] ?>" value="<?php echo $value['passing_marks'] ?>" placeholder="Enter Passing Marks">
  </div>
</td>

下面是我的 jquery 验证器。

$('input[id^="fmark_"]').each(function () {
    $(this).rules('add', {
        required: true,
        messages: {
            required: "Required"
        }
    });
});
$('input[id^="pmarks_"]').each(function () {
    $(this).rules('add', {
        required: true,
        messages: {
            required: "Required"
        }
    });
});

Answer 1

使用 jQueryValidate，这很容易通过创建如下所示的验证器来完成。（您可能想要一种更好的方法来将您的 fmark id 获取到变量 "id"。按照您编写代码的方式，您将不得不解析文本以匹配不理想的 id。）

$.validator.addMethod("lessThanFullMarks",
function (value, event, params) {
    var id = 'fmark_'+params;
    return parseInt(value) < parseInt($('#'+id).val()); });
});

然后使用它只需将它添加到规则和消息中，就像这样。

$('input[id^="fmark_"]').each(function () {
    $(this).rules('add', {
        required: true,
        messages: {
            required: "Required"
        }
    });
});
$('input[id^="pmarks_"]').each(function () {
    $(this).rules('add', {
        required: true,
        lessThanFullMarks: ["<PUT THE MATCHING FULL MARK ID HERE>"],
        messages: {
            required: "Required",
            lessThanFullMarks: "Must be greater than Full Marks."
        }
    });
});

这只是我个人的喜好，但我认为将规则应用于表单比运行匹配选择器上的 each 更简洁、更灵活。这是我在其中一个项目中执行此操作的示例。

$("#createContractForm").validate({
            rules: {
                Name: {
                    required: true,
                    maxlength: 50
                },
                ContractNumber: {
                    required: true,
                    maxlength: 100
                },
                InitialValue: {
                    required: true,
                    minlength: 1,
                    number: true
                },
                SourcingDate: {
                    required: true,
                    validDate: true,
                    date: true
                },
                EffectiveDate: {
                    required: true,
                    validDate: true,
                    date: true,
                    greaterThanSourcingDate: true
                },
                EndDate: {
                    required: true,
                    validDate: true,
                    date: true,
                    greaterThanEffectiveDate: true
                },
                ChampionId: {
                    required: true
                },
                CategoryId: {
                    required: true
                },
                SubcategoryId: {
                    required: true
                },
                Details: {
                    required: true
                },
                ClientId: {
                    required: true
                },
                ClientRegionId: {
                    required: true,
                    remote: {
                        url: $("#urlContractExists").data("request-url"),
                        type: "post",
                        data: {
                            ClientId: function () {
                                return $("#ClientId").val();
                            },
                            ClientRegionId: function () {
                                return $("#ClientRegionId").val();
                            },
                            CategoryId: function () {
                                return $("#CategoryId").val();
                            },
                            SubcategoryId: function () {
                                return $("#SubcategoryId").val();
                            },
                            SupplierId: function () {
                                return $("#SupplierId").val();
                            },
                            SupplierRegionId: function () {
                                return $("#SupplierRegionId").val();
                            }
                        }
                    }
                },
                SupplierId: {
                    required: true
                },
                SupplierRegionId: {
                    required: true,
                    remote: {
                        url: $("#urlContractExists").data("request-url"),
                        type: "post",
                        data: {
                            ClientId: function () {
                                return $("#ClientId").val();
                            },
                            ClientRegionId: function () {
                                return $("#ClientRegionId").val();
                            },
                            CategoryId: function () {
                                return $("#CategoryId").val();
                            },
                            SubcategoryId: function () {
                                return $("#SubcategoryId").val();
                            },
                            SupplierId: function () {
                                return $("#SupplierId").val();
                            },
                            SupplierRegionId: function () {
                                return $("#SupplierRegionId").val();
                            }
                        }
                    }
                }
            },
            messages: {
                Name: {
                    required: "Contract Name is required"
                },
                ContractNumber: {
                    required: "Contract Number is required"
                },
                InitialValue: {
                    required: "Initial Value is required",
                    number: "Initial Value must be a number"
                },
                SourcingDate: {
                    required: "Sourcing Date is required",
                    date: "Sourcing Date must be a valid date"
                },
                EffectiveDate: {
                    required: "Effective Date is required",
                    date: "Effective Date must be a valid date",
                    greaterThanSourcingDate: "Effective Date must be greater than the Sourcing Date"
                },
                EndDate: {
                    required: "End Date is required",
                    date: "End Date must be a valid date",
                    greaterThanEffectiveDate: "End Date must be greater than the Effective Date"
                },
                ChampionId: {
                    required: "A Champion is required"
                },
                CategoryId: {
                    required: "A Category is required"
                },
                SubcategoryId: {
                    required: "A Subcategory is required"
                },
                Details: {
                    required: "Deatils are required"
                },
                ClientId: {
                    required: "Client is required"
                },
                ClientRegionId: {
                    required: "Client Region is required",
                    remote: "Contract for the same Category, Subcategory, Client Region, and Supplier Region already exists."
                },
                SupplierId: {
                    required: "Supplier is required"
                },
                SupplierRegionId: {
                    required: "Supplier Region is required",
                    remote: "Contract for the same Category, Subcategory, Client Region, and Supplier Region already exists."
                }
            },
            highlight: function (element) {
                $(element).closest(".form-group").addClass("has-error");
            },
            unhighlight: function (element) {
                $(element).closest(".form-group").removeClass("has-error");
            },
            errorElement: "span",
            errorClass: "help-block",
            errorPlacement: function (error, element) {
                if (element.parent(".input-group").length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

使用 jquery 验证器验证两个字段

Validate the two field using jquery validator

validation

jquery

jquery-validate