Tengo una entrada en la que cambio el atributo de nombre y otros atributos seleccionando cada botón de opción. Ahora verifico el atributo de nombre de cada estado de la entrada por jquery.validation y muestro su error
¿Cómo puedo usar otro atributo para hacer esto en lugar de usar el atributo de nombre?
$("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>Puede usar .rules("add", options) y agregar nuevas reglas según el selector en el que está aplicando .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>