I have HTML form which has multiple button and multiple text fields on same form some thing like below.
Form: #myform
TextField1 ---> Button1
TextField2 ---> Button2
.. so on like more number of fields
I want to apply "required" attribute only specific button to specific textfield (Button1 for TextField1 )
It will be grateful if someone provide solution in javascript by passing some parameter to perform this validation
I found solution to suit my requirement which I asked in automated fashion, I am posting the code so that might be useful if someone searching solution like me
Calling function on button click
<input type="text" id="txtfield1" class="texttype0" th:field="*{txtfield1}" placeholder="Enter txtfield1">
<button type="submit" id="bt1" onclick="btn('txtfield1')" name="action" >Update</button>
And below is my javascript function
function btn(txtid) {
document.getElementById(txtid).setAttribute("required", true);
$('form#myform').find(
'input[type=text],input[type=date],select').each(
function() {
var name = $(this).attr('id');
if (txtid == name) {
$(name).prop("required", true);
} else {
$(name).prop("required", false);
document.getElementById(name).required = false;
}
});
}
This will search all element from a form and remove require attribute except the one which you passed in parameter.