title: Validate Form - When one variable = "Y", validate that two values are not empty strings?
body: <p>I am still in the process of learning JavaScript but attempting to build in some form validation for some end users so that fields cannot be empty based on certain variables.  </p>
  
  <p>Here is my relevant 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 validateForm() {
    var a = document.forms["myForm"]["Joint_1"].value;
    var b = document.forms["myForm"]["ID_1"].value;
    var c = document.forms["myForm"]["ID_2"].value;
    if (a == "Y" &amp;&amp; b == "" &amp;&amp; c == "") {
      console.log("Account is indicated to be joint, either one or both instances of ID is incomplete");
      return false;
    }
    if (a == "N" &amp;&amp; b == "") {
      console.log("ID is incomplete for a single owner");
      return false;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.a {
    display: table-row;
  }
  
  .a div {
    display: table-cell;
    padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="myForm" onsubmit="return validateForm()" method="post"&gt;
    &lt;div class="a"&gt;
      &lt;div class='a'&gt;
        &lt;div&gt;Joint Account?:&lt;/div&gt;
        &lt;div&gt;&lt;select id="unit" size="1" name="Joint_1"&gt;
          &lt;option disabled="disabled" selected="selected" value=""&gt;&lt;/option&gt;
          &lt;option value="Y"&gt;Y&lt;/option&gt;
          &lt;option value="N"&gt;N&lt;/option&gt;
          &lt;/select&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="a"&gt;
      &lt;div&gt;ID:&lt;/div&gt;
      &lt;div&gt;&lt;input type="text" name="ID_1" size="12" maxlength="12"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="a"&gt;
      &lt;div&gt;ID:&lt;/div&gt;
      &lt;div&gt;&lt;input type="text" name="ID_2" size="12" maxlength="12"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='a'&gt;
      &lt;div&gt;&lt;input type="submit" value="Save"&gt;&lt;/div&gt;
      &lt;div&gt; &lt;input type="reset" value="Reset"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><code>Joint_1</code> will never be an empty string as it will be inheriting its value from elsewhere. </p>
  
  <p>The form works when <code>Joint_1 == "Y"</code> and both <code>ID_1 == ""</code> and <code>ID_2 == ""</code>. </p>
  
  <p>However, when <code>Joint_1 == "Y"</code> and either <code>ID_1</code> or <code>ID_2</code> is not an empty string, the form will advance instead of generating the alert. Both <code>ID_1</code> and <code>ID_2</code> must be filled out in the instance of a "Y" value in <code>Joint_1</code>. </p>
  
  <p>Is there a way to accomplish this so that the alert will generate when <code>Joint_1 == "Y"</code> and either <code>ID_1 == ""</code> or <code>ID_2 == ""</code>? I tried using the or (<code>||</code>) operator instead, but then I failed on the <code>Joint_1 == "N"</code> logic. </p>