在同一表单上具有多个文本字段的多个按钮的HTML“必需”属性

Question

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

Answer 1

According to mozilla "required" is not included. So "required" is not allowed on element "button". You can add, but it will not add validation. For button and i would use validation with javascript.

Answer 2

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.