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

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>

CodePudding user response：

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>