select option required on submit using javascript

Question

I don't have the access to html code, I can only edit JS files. When "required" attribute to the <select> is added it works, but how can I make it using JavaScript?

I have tried this:

document.querySelector('.css-dropdowns').required = true;

didn't work

Please take a look jsfiddle

Are you using any validation js ? – Mitul Oct 23 '15 at 03:26 — Mitul, Oct 23 '15 at 03:26

Tushar · Accepted Answer · 2015-10-23T03:30:54.587

querySelector will only select the first matching element from DOM.

Use querySelectorAll to get all the matching elements and loop over the collection and add the required attribute.

var allEls = document.querySelectorAll('.css-dropdowns');

for (var i = 0; i < allEls.length; i++) {
    allEls[i].required = 'required';
}

Fiddle

var allEls = document.querySelectorAll('.css-dropdowns');

for (var i = 0; i < allEls.length; i++) {
  allEls[i].required = 'required';
}

<div class="search-form search_inventory_box row  styled_input">
  <form method="get" action="#">
    <input type='hidden' name='page_id' value=''>
    <div class="col-md-6 clearfix">
      <div class="my-dropdown make-dropdown make-dropdown">
        <select name='make' class='css-dropdowns' data-sort='make' data-prefix='' data-label-singular='Make' data-label-plural='Makes' data-no-options='No options'>
          <option value=''>Make</option>
          <option value='Nissan' data-key='nissan'>Nissan</option>
          <option value='Porsche' data-key='porsche'>Porsche</option>
        </select>
      </div>
      <div class="my-dropdown model-dropdown make-dropdown">
        <select name='model' class='css-dropdowns' data-sort='model' data-prefix='' data-label-singular='Model' data-label-plural='Models' data-no-options='No options'>
          <option value=''>Model</option>
          <option value='Boxster' data-key='boxster'>Boxster</option>
          <option value='Carrera' data-key='carrera'>Carrera</option>
          <option value='Cayenne' data-key='cayenne'>Cayenne</option>
          <option value='GTR' data-key='gtr'>GTR</option>
          <option value='GTS' data-key='gts'>GTS</option>
        </select>
      </div>
      <div class="my-dropdown transmission-dropdown make-dropdown">
        <select name='transmission' class='css-dropdowns' data-sort='transmission' data-prefix='' data-label-singular='Transmission' data-label-plural='Transmissions' data-no-options='No options'>
          <option value=''>Transmission</option>
          <option value='5-Speed Automatic' data-key='5-speed-automatic'>5-Speed Automatic</option>
          <option value='5-Speed Manual' data-key='5-speed-manual'>5-Speed Manual</option>
          <option value='6-Speed Automatic' data-key='6-speed-automatic'>6-Speed Automatic</option>
          <option value='6-Speed Manual' data-key='6-speed-manual'>6-Speed Manual</option>
          <option value='6-Speed Manual|6-Speed Manual' data-key='6-speed-manual-6-speed-manual'>6-Speed Manual|6-Speed Manual</option>
          <option value='6-Speed Semi-Auto' data-key='6-speed-semi-auto'>6-Speed Semi-Auto</option>
          <option value='8-Speed Automatic' data-key='8-speed-automatic'>8-Speed Automatic</option>
        </select>
      </div>
      <div class='clearfix'></div>
    </div>
    <div class="col-md-6 clearfix">
      <div class="my-dropdown condition-dropdown make-dropdown">
        <select name='condition' class='css-dropdowns' data-sort='condition' data-prefix='' data-label-singular='Condition' data-label-plural='Conditions' data-no-options='No options'>
          <option value=''>Condition</option>
          <option value='Brand New' data-key='brand-new'>Brand New</option>
          <option value='Slightly Used' data-key='slightly-used'>Slightly Used</option>
        </select>
      </div>
      <div class='multiple_dropdowns'>
        <div class="my-dropdown make-dropdown">
          <select name='yr[]' class='css-dropdowns' data-sort='year' data-prefix='' data-label-singular='Year' data-label-plural='Years' data-no-options='No options'>
            <option value=''>Min Year</option>
            <option value='2009' data-key='2009'>2009</option>
            <option value='2010' data-key='2010'>2010</option>
            <option value='2013' data-key='2013'>2013</option>
            <option value='2014' data-key='2014'>2014</option>
            <option value='2014|2014' data-key='2014-2014'>2014|2014</option>
            <option value='2015' data-key='2015'>2015</option>
            <option value='Horsepower' data-key='horsepower'>Horsepower</option>
          </select>
        </div><span class="my-dropdown-between">to</span>

        <div class="my-dropdown make-dropdown">
          <select name='yr[]' class='css-dropdowns' data-sort='year' data-prefix='' data-label-singular='Year' data-label-plural='Years' data-no-options='No options'>
            <option value=''>Max Year</option>
            <option value='2009' data-key='2009'>2009</option>
            <option value='2010' data-key='2010'>2010</option>
            <option value='2013' data-key='2013'>2013</option>
            <option value='2014' data-key='2014'>2014</option>
            <option value='2014|2014' data-key='2014-2014'>2014|2014</option>
            <option value='2015' data-key='2015'>2015</option>
            <option value='Horsepower' data-key='horsepower'>Horsepower</option>
          </select>
        </div>
      </div>
      <input class='full-width' type='search' name='keywords' value='' placeholder='Refine with keywords'>
      <div class='clearfix'></div>
    </div>
    <div class="col-md-12 clearfix search_categories">
      <div class='clearfix'></div>
    </div>
    <div class="form-element pull-right margin-right-10 col-md-12">
      <input type="submit" value="GIVE ME A GOOD PRICE" class="find_new_vehicle pull-right">
      <div class="loading_results pull-right"><i class="fa fa-circle-o-notch fa-spin"></i>

      </div>
    </div>
  </form>
</div>

If jQuery is loaded on page, use

$('.css-dropdowns').attr('required', 'required');

Updated Fiddle

When I implement this on my web page, it is not showing the message "Please select an item..." is there any alternative way to show? — Elyor, Oct 23 '15 at 03:30
@Elyor You need to wrap the code in `DOMContentLoaded`(or `ready` if using jQuery) event callback or move the script to the end of body. Take a look at http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element. — Tushar, Oct 23 '15 at 03:32
I tried this `document.addEventListener("DOMContentLoaded", function() { $('.css-dropdowns').attr('required', 'required'); })` not working. could you help? — Elyor, Oct 23 '15 at 03:59
@Elyor Do you see any error in console? Is jQuery loaded on page? and before using it? This should work. Please create jsfiddle. — Tushar, Oct 23 '15 at 04:00
@Elyor If jQuery is not loaded on page use `document.addEventListener("DOMContentLoaded", function() { var allEls = document.querySelectorAll('.css-dropdowns'); for (var i = 0; i < allEls.length; i++) { allEls[i].required = 'required'; } });` — Tushar, Oct 23 '15 at 04:01
you know, I have multiple select tags. when I use DOMContentLoaded it applies for the first select, others are ignored. — Elyor, Oct 23 '15 at 04:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/93124/discussion-between-tushar-and-elyor). — Tushar, Oct 23 '15 at 04:10

score 0 · Answer 2 · answered Oct 23 '15 at 03:31

You should add the required attribute to the .css-dropdowns when the script is loaded (not inside the form submit function).

document.querySelector('.css-dropdowns').required = true;

$('.search_inventory_box form').submit(function(e) {    
    //...
});

score 0 · Answer 3 · answered Oct 24 '15 at 02:37

Here is my long answer

$('.search_inventory_box form').submit(function(e) {

if ( document.getElementsByName('make')[0].value == '' ){
    alert('Select make!');
    return false;
}
else if ( document.getElementsByName('condition')[0].value == '' ){
    alert('Select condition!');
    return false;
}
else if ( document.getElementsByName('model')[0].value == '' ){
    alert('Select model!');
    return false;
}
else if ( document.getElementsByName('transmission')[0].value == '' ){
    alert('Select transmission!');
    return false;
}
else if ( document.getElementsByName('yr[]')[0].value == '' ){
    alert('Select min year!');
    return false;
}

else if ( document.getElementsByName('yr[]')[1].value == '' ){
    alert('Select max year!');
    return false;
}
    console.log('fwef');


    $('.search_inventory_box form select[value=""]').attr('name', '');

    $(this).find("select option:selected").each( function(index, element){
        $(this).val($(this).data('key'));
    });
});

select option required on submit using javascript

3 Answers3