How can I use another attribute instead of the name attribute in jquery.validation?

Question

I have an input that I change the name attribute and other attributes by selecting each radio button. Now I check the name attribute of each state of the input by jquery.validation and display its error

How can I use another attribute to do this instead of using the name attribute?

 $("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

You can use .rules("add", options) and add new rules based on selector which you're applying .rules on it:

 $("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>