title: Html/Javascript/Css how to check if inputs are empty
body: <p>I have 6 different input-fields and I want to do so you have to fill in all of them, else a alert message will pop-up. Any tips on how to do this?</p>
  
  <p>I also have problems with option for different <code>font-style</code>s. When you click on the different options for the <code>font-style</code>, the text that you wrote in the input-filed should change and also the text infront "förtag" and so on. </p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function SkrivUt() {
    var el = document.getElementById('f');
    el.style.color = document.getElementById('textColor').value;
    el.style.fontStyle = document.getElementById('selectedFont').value;
    el.style.backgroundColor = document.getElementById('backGroundColour').value;
  
    $("#area1").html($("#foretagText").val());
    $("#area2").html($("#efternamnText").val());
    $("#area3").html($("#fornamnNamnText").val());
    $("#area4").html($("#titleText").val());
    $("#area5").html($("#telefonText").val());
    $("#area6").html($("#epostText").val());
    $("#visitkort").hide();
    $("#visitkortsDemo").show();
  }
  
  function reset() {
    document.getElementById('foretagText').value = "";
    document.getElementById('efternamnText').value = "";
    document.getElementById('fornamnNamnText').value = "";
    document.getElementById('titleText').value = "";
    document.getElementById('telefonText').value = "";
    document.getElementById('epostText').value = "";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form-style-3 {
    max-width: 400px;
    max-height 400px;
    font-family: "Comic Sans MS", cursive, sans-serif;
  }
  .form-style-3 label {
    display: block;
    margin-bottom: 10px;
  }
  .form-style-3 label span {
    float: left;
    width: 150px;
    font-weight: bold;
    font-size: 13px;
    text-shadow: 1px 1px 1px #fff;
  }
  .form-style-3 fieldset {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    margin: 0px 0px 10px 0px;
    border: 1px solid #FFD2D2;
    padding: 20px;
    background: lightblue;
    box-shadow: inset 0px 0px 15px #FFE5E5;
    -moz-box-shadow: inset 0px 0px 15px #FFE5E5;
    -webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
  }
  /*Format legent inom ett fieldset*/
  
  .form-style-3 fieldset legend {
    color: #FFA0C9;
    border-top: 1px solid #FFD2D2;
    border-left: 1px solid #FFD2D2;
    border-right: 1px solid #FFD2D2;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    background: #FFF4F4;
    padding: 0px 8px 3px 8px;
    box-shadow: -0px -1px 2px #F1F1F1;
    -moz-box-shadow: -0px -1px 2px #F1F1F1;
    -webkit-box-shadow: -0px -1px 2px #F1F1F1;
    font-weight: normal;
    font-size: 12px;
  }
  .select-field {
    background: gray;
    color: white;
    border-radius: 5px 5px 5px 5px;
  }
  .input-field {
    font-family: "Comic Sans MS", cursive, sans-serif;
    color: red
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Visitkort&lt;/title&gt;
    &lt;link rel='stylesheet' type='text/css' href='Style.css' /&gt;
    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="form-style-3"&gt;
      &lt;div id="visitkort" style='display:block'&gt;
        &lt;fieldset&gt;
          &lt;legend&gt;Visitkort&lt;/legend&gt;
          &lt;label&gt;&lt;span&gt;Företaget&lt;/span&gt;
            &lt;input type="text" id="foretagText" /&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Efternamn &lt;/span&gt;
            &lt;input type="text" id="efternamnText" /&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Förnamn &lt;/span&gt;
            &lt;input type="text" id="fornamnNamnText" /&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Titel &lt;/span&gt;
            &lt;input type="text" id="titleText" /&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Telefon &lt;/span&gt;
            &lt;input type="text" id="telefonText" /&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Epost &lt;/span&gt;
            &lt;input type="text" id="epostText" /&gt;
          &lt;/label&gt;
          &lt;label&gt;
            &lt;span&gt;Välj bakgrundsfärg&lt;/span&gt;
            &lt;select class="select-field" id="backGroundColour"&gt;
              &lt;option value="RoyalBlue"&gt;Blå&lt;/option&gt;
              &lt;option value="Yellow"&gt;gul&lt;/option&gt;
              &lt;option value="Crimson"&gt;Röd&lt;/option&gt;
            &lt;/select&gt;
          &lt;/label&gt;
          &lt;label&gt;
            &lt;span&gt;Välj Textfärg&lt;/span&gt;
            &lt;select class="select-field" id="textColor"&gt;
              &lt;option value="RoyalBlue"&gt;Blå&lt;/option&gt;
              &lt;option value="Yellow"&gt;Gul&lt;/option&gt;
              &lt;option value="Crimson"&gt;röd&lt;/option&gt;
            &lt;/select&gt;
          &lt;/label&gt;
          &lt;label&gt;
            &lt;span&gt;Välj typsnitt&lt;/span&gt;
            &lt;select class="select-field" id="selectedFont"&gt;
              &lt;option value="Verdana"&gt;Verdana&lt;/option&gt;
              &lt;option value="Ariel"&gt;Ariel&lt;/option&gt;
              &lt;option value="Impact"&gt;Impact&lt;/option&gt;
              &lt;option value="Tahoma"&gt;Tahoma&lt;/option&gt;
            &lt;/select&gt;
          &lt;/label&gt;
  
          &lt;label&gt;&lt;span&gt;&lt;button type="button" onclick="reset()"&gt;Nollställ&lt;/button&gt;&lt;/span&gt;&lt;span&gt;&lt;button type="button"  onclick="SkrivUt()"&gt;Skriv ut&lt;/button&gt;&lt;/span&gt;
          &lt;/label&gt;
  
        &lt;/fieldset&gt;
  
      &lt;/div&gt;
  
      &lt;div id="visitkortsDemo" style='display:none'&gt;
        &lt;fieldset id="f"&gt;
          &lt;legend&gt;Förgranskning av visitkort&lt;/legend&gt;
  n&gt;Företaget &lt;/span&gt;
            &lt;p id="area1"&gt;&lt;/p&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Efternamn &lt;/span&gt;
            &lt;p id="area2"&gt;&lt;/p&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Förnamn &lt;/span&gt;
            &lt;p id="area3"&gt;&lt;/p&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Titel &lt;/span&gt;
            &lt;p id="area4"&gt;&lt;/p&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Telefon &lt;/span&gt;
            &lt;p id="area5"&gt;&lt;/p&gt;
          &lt;/label&gt;
          &lt;label&gt;&lt;span&gt;Epost &lt;/span&gt;
            &lt;p id="area6"&gt;&lt;/p&gt;
          &lt;/label&gt;
        &lt;/fieldset&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>