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>

Where is the code of change the name attribute and other attributes by selecting each radio button? — Saeed
– Saeed, Commented Sep 14, 2021 at 4:51
jqueryvalidation documentation says A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this. Are you going to use another attr for validation? — Saeed
– Saeed, Commented Sep 14, 2021 at 5:29

Hossein Azizdokht · Accepted Answer · 2021-09-14 07:22:44Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related