如何在 jquery.validation 中使用另一個屬性而不是 name 屬性？

Question

我有一個輸入，我通過選擇每個單選按鈕來更改名稱屬性和其他屬性。 現在我通過 jquery.validation 檢查輸入的每個狀態的名稱屬性並顯示其錯誤

如何使用另一個屬性而不是使用 name 屬性來執行此操作？

 $("input[type=radio]").prop("checked", false); $("input[type=radio]:nth-child(1)").prop("checked", true); $("input[type=radio]").click(function (event) { $("label.error").remove(); $("input").removeClass('error'); $("#BillIdentity").val(''); $("input[type=radio]").prop("checked", false); $(this).prop("checked", true); var id = $(this).attr("id"); console.log(id); if (id === "BillIdentitySelect") { $("#BillIdentity").attr("maxLength", "30") $("#BillIdentity").attr("name", "BillIdentityMode") $("#BillIdentity").attr("placeholder", "Insert billing id") //if ($('.iinput').value.length > 10) { return false; } } else if (id === "NationalCodeSelect") { $("#BillIdentity").attr("maxLength", "10") $("#BillIdentity").attr("name", "NationalCodeMode") $("#BillIdentity").attr("placeholder", "Inser national code") } //event.preventDefault(); }); var $form = $("form"); $form.validate({ rules: { BillIdentityMode: { required: true, minlength: 11 }, NationalCodeMode: { required: true, minlength: 10 } }, messages: { BillIdentityMode: "You must enter at least 11 characters", NationalCodeMode: "The number is wrong!" } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> <div class="radioGroup"> <input type="radio" id="BillIdentitySelect" name="radio1" /> <label for="BillIdentitySelect">Billing ID</label> <input type="radio" id="NationalCodeSelect" name="radio2" /> <label for="NationalCodeSelect">National Code</label> </div> <form> <input maxlength="20" name="BillIdentityMode" id="BillIdentity" class="w-100 text-center" type="text" placeholder="Insert billing id" /> </form>

Answer 1

您可以使用.rules("add", options)並根據您在其上應用.rules的選擇器添加新規則：

 $("input[type=radio]").prop("checked", false); $("input[type=radio]:nth-child(1)").prop("checked", true); $("input[type=radio]").click(function (event) { $("label.error").remove(); $("input").removeClass('error'); $("#BillIdentity").val(''); $("input[type=radio]").prop("checked", false); $(this).prop("checked", true); var id = $(this).attr("id"); console.log(id); if (id === "BillIdentitySelect") { $("#BillIdentity").attr("maxLength", "30") $("#BillIdentity").attr("placeholder", "Insert billing id") $("#BillIdentity").attr("my-attr","billMode") $("#BillIdentity[my-attr='billMode']").rules("add",{ required: true, minlength: 11, messages:{required:"required",minlength:"You must enter at least 11 characters" } }) } else if (id === "NationalCodeSelect") { $("#BillIdentity").attr("maxLength", "10") $("#BillIdentity").attr("placeholder", "Inser national code") $("#BillIdentity").attr("my-attr","nationalCode"); $("#BillIdentity[my-attr='nationalCode']").rules("add",{ required: true, minlength: 10, messages:{required:"required",minlength:"The number is wrong!" } }) } //event.preventDefault(); }); var $form = $("form"); $form.validate();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> <div class="radioGroup"> <input type="radio" id="BillIdentitySelect" name="radio1" /> <label for="BillIdentitySelect">Billing ID</label> <input type="radio" id="NationalCodeSelect" name="radio2" /> <label for="NationalCodeSelect">National Code</label> </div> <form> <input maxlength="20" name="BillIdentity" id="BillIdentity" class="w-100 text-center" type="text" placeholder="Insert billing id" /> </form>