Remove Required attribute after select

Question

I have this search bar:

I dont want user to make a full search because there are like 40000 records on database and it will take a while.

So I split that in 2 options and I have the first field as required,

<select required name="field1" id="destination" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"> <option name="country" value="">Field</option> <option name="country" value="%">Any destination</option> </select>

But I need to remove that required field if they choose Field 2 or Field 3.

So I think best practice is to do something like onchange and remove that required with something like this .removeAttribute("required")?

Whats the easiest way to do that? Vanilla or JQuery? I am a beginner on JavaScript so any feedback would be helpful.

Possible duplicate of [jquery removing html5 required attribute](https://stackoverflow.com/questions/13951336/jquery-removing-html5-required-attribute) — HD.., Sep 21 '17 at 09:33
@Maria, can you accept the best suitable answer you found among all? — Himanshu Upadhyay, Sep 21 '17 at 09:43

score 5 · Answer 1 · answered Sep 21 '17 at 09:35

5

You can simply add this one

$("field1").prop('required',false);

answered Sep 21 '17 at 09:35

HD..

1,456
3
28
48

score 5 · Accepted Answer · answered Sep 21 '17 at 09:36

You can do like this using jquery: (Assuming that field2 and field3 are id of those dropdown fields.)

$(document).ready(function(){
    var field2 = '';
    var field3 = '';
    $('#field2').on('change',function(){
        field = $(this).val();
        removeRequired();
    });
    $('#field3').on('change',function(){
        field3 = $(this).val();
        removeRequired();
    });
    function removeRequired(){
      if(field2 != '' && field3 != '')
      {
          $('#destination').removeAttr('required');
      }
    }
});

Yeap that worked, just had to to change && to || cause I just wanted one of these fields... Cheers — Maria, Sep 21 '17 at 09:45

score 1 · Answer 3 · answered Sep 21 '17 at 09:33

1

Pseudo code to do this:

if(field2.value || field3.value) {
     $("field1").removeAttr("required");
}

Hope this helps!

answered Sep 21 '17 at 09:33

Tavish Aggarwal

1,020
3
22
51

score 1 · Answer 4 · answered Sep 21 '17 at 09:34

1

You can either use jquery removeAttr function or use javascript removeAttribute function

answered Sep 21 '17 at 09:34

Akshit Ahuja

337
2
15

Remove Required attribute after select

4 Answers4