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>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>