Question

我想使用验证器插件方法验证传递标记这两个字段总是小于满分。

注意::我的Html字段是动态的，因此不要视为单个字段。

此处位于我的Html字段下方。

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>
   $(document).ready(function(){
   $("#hide").click(function(){
   $("#adbox").hide();
   });
   });
   </script>
   <button id="hide">skip ad &#10060;</button>


   <div id="adbox"> ad code goes here </div>

以下是我的jquery验证器。

<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>

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."
        }
    });
});

仅仅是我个人的偏好，但我认为对表单应用规则比在匹配的选择器上运行每个规则更简洁，更灵活。以下是我的一个项目中的示例。

$("#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验证器验证这两个字段

1 个答案: