title: Set value of span if input is empty
body: <p>I want to validate this form and set the value of span if the corresponding input value is empty. However, <code>.siblings()</code> and <code>.next()</code> are not working. </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>$('#cf_submit').on("click", function(e) {
    e.preventDefault();
    validateForm();
  });
  
  function validateForm() {
    if ($('#cf_name').val() || $('#cf_email').val() == '') {
  
      //$('.calc_error').text('Required'); //THIS WORKS
      $(this).siblings('.calc_error').text('Required'); //doesnt work
      //$(this).parent("div").children('span').text('Required') //doesn't work
  
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form action="" method="post" novalidate="novalidate"&gt;
  
    &lt;div&gt;
      &lt;label for="cf_name"&gt;Name &lt;/label&gt;
      &lt;input class="calc_input" type="text" id="cf_name" name="cf_name" pattern="[a-zA-Z0-9 ]+" size="40" /&gt;
      &lt;br&gt;
      &lt;span class="calc_error"&gt;&lt;?php echo $nameErr; ?&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;label for="cf_email"&gt;Email &lt;/label&gt;
      &lt;input class="calc_input" type="email" id="cf_email" name="cf_email" size="40" /&gt;
      &lt;br&gt;
      &lt;span class="calc_error"&gt;&lt;?php echo $emailErr; ?&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;input type="submit" class="submit_button" id="cf_submit" name="cf_submit" value="Submit" /&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>