title: Radio button value is not null
body: <p>I'm making a website with a wizard-like web form, split up in multiple <code>fieldset</code>. Because of this, the <code>required</code> attribute for <code>input</code> doesn't work until you reach the last slide, where the complete form is submitted. However, since only the current <code>fieldset</code> is visible, you won't get an alert if you forgot to fill in a <code>required</code> in an earlier <code>fieldset</code>.</p>
  
  <p>This is why I'm trying to implement some jQuery that checks the value of an <code>input</code> that has the attribute <code>required</code>, so a user doesn't end up on page 8 and tries to submit the form, without knowing he/she forgot to fill in a <code>required</code> on page 2.</p>
  
  <p>The problem I'm having is with a <code>radio</code> input. I know I only have to add one <code>required</code> to the whole list for the attribute to work in HTML, but since my jQuery checks the value of <code>[required]</code>, it doesn't matter what radio-button I select, the value will always be the one I added required to.</p>
  
  <p><a href="https://jsfiddle.net/mepLaorr/1/" rel="nofollow">JSFIDDLE</a></p>
  
  <p><strong>Here's some HTML</strong></p>
  
  <pre><code>&lt;div class="description"&gt;
      Pladstype:
  &lt;/div&gt;
  &lt;div class="descriptionData"&gt;
      &lt;select id="form_billet_pladstype" required&gt;
          &lt;option value="" disabled selected&gt;Vælg pladstype&lt;/option&gt;
          &lt;option value="0"&gt;Ståpladser&lt;/option&gt;
          &lt;option value="1"&gt;Siddepladser&lt;/option&gt;
          &lt;option value="2"&gt;Sidde- og ståpladser&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="description"&gt;
      Nummererede pladser:
  &lt;/div&gt;
  &lt;div class="descriptionData"&gt;
      &lt;div class="descriptionData"&gt;
          &lt;input required type="radio" value="ja" name="form_billet_nummererede" id="form_billet_nummererede_ja" class="descriptionData janej valid"&gt;&lt;label for="form_billet_nummererede_ja"&gt;Ja&lt;/label&gt;
          &lt;input type="radio" value="nej" name="form_billet_nummererede" id="form_billet_nummererede_nej" class="descriptionData janej valid"&gt;&lt;label for="form_billet_nummererede_nej"&gt;Nej&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="description"&gt;
      Billet-nr.:
  &lt;/div&gt;
  &lt;div class="descriptionData"&gt;
      &lt;select name="form_ticketType" id="form_ticketType" required&gt;
          &lt;option value="" disabled selected&gt;Vælg billetnr.&lt;/option&gt;
          &lt;option value="0"&gt;Type 0 - Unummereret plads&lt;/option&gt;
          &lt;option value="14"&gt;Type 14 - Unummererede m. niveau, række og plads&lt;/option&gt;
          &lt;option value="15"&gt;Type 15 - Alle felter&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div/&gt;
  </code></pre>
  
  <p><strong>The jQuery</strong></p>
  
  <pre><code>var requiredFields = $(element).find('#' + stepName + ' [required]')
  requiredFields.each( function(idx, elem) {
      var val = $(elem).val();
      alert(val);
  });
  </code></pre>
  
  <p>I understand now, after writing this question, that the value for the <code>radio</code> is always the one on which I've added <code>required</code>, but how do I fix this, so it actually has a value of <code>null</code> when the page is loaded and just gets a value of <code>checked</code> (or the real value, but not necessary) when one of the options is selected?</p>
  
  <p>The easy way out would be to have one box selected on load, after which he can choose the other one, but I'm wondering if it's possible to start with an empty value for the radio-input, but still use <code>required</code>.</p>