title: Part of JS code prevent form submitting and saving in database
body: <p>I have simple form on page</p>
  
  <pre><code>&lt;form name="basicform" id="basicform" method="post" action="post.php" enctype="multipart/form-data" role="form"&gt;
      &lt;div class="panel panel-primary setup-content" id="step-1"&gt;
          &lt;div class="panel-heading"&gt;
               &lt;h3 class="panel-title"&gt;Tell us about yourself&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label"&gt;Your Name *&lt;/label&gt;
                  &lt;input maxlength="100" type="text" name="entry_name" required="required" class="form-control" placeholder="" /&gt;
              &lt;/div&gt;              
              &lt;button class="btn btn-primary nextBtn pull-right open1" type="button"&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="panel panel-primary setup-content" id="step-2"&gt;
          &lt;div class="panel-heading"&gt;
               &lt;h3 class="panel-title"&gt;Final Step!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;button class="btn btn-success pull-right open2" type="submit" name="add" id="add"&gt;I agree. I’m ready to get my itinerary!&lt;/button&gt;
              &lt;img src="assets/images/spinner.gif" alt="" id="loader" style="display: none; width:32px;height:32px;"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is the JS (part of it where the problem is)</p>
  
  <pre><code>// validate form on keyup and submit
  var v = jQuery("#basicform").validate({
    rules: {},
    errorElement: "span",
    errorClass: "help-inline-error",
  });    
  $(".open1").click(function() {
    if (v.form()) {
      $(".frm").hide("fast");
      $("#sf2").show("slow");
    }
  });
  
  $(".open2").click(function() {
    if (v.form()) {
      $("#loader").show();
       setTimeout(function(){
         $("#basicform").html('&lt;img src="assets/images/logo3.png" style="width:450px;height:250px;margin-left: 30%;"&gt;&lt;h2&gt;Awesome! &lt;/h2&gt;');
       }, 1000);
      return false;
    }
  });
  </code></pre>
  
  <p>This is the part which when I remove is saving in database.</p>
  
  <pre><code>// validate form on keyup and submit
  var v = jQuery("#basicform").validate({
    rules: {},
    errorElement: "span",
    errorClass: "help-inline-error",
  }); 
  </code></pre>
  
  <p>But if I remove it this part doesn't work anymore</p>
  
  <pre><code>$(".open2").click(function() {
    if (v.form()) {
      $("#loader").show();
       setTimeout(function(){
         $("#basicform").html('&lt;img src="assets/images/logo3.png" style="width:450px;height:250px;margin-left: 30%;"&gt;&lt;h2&gt;Awesome! &lt;/h2&gt;');
       }, 1000);
      return false;
    }
  });
  </code></pre>
  
  <p>Can you help me here? Sorry I forgot to mention that when I delete the validation part and click on Next button I receive this error in console</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: v is not defined</p>
  </blockquote>
  
  <p>This is because of this <code>if (v.form())</code> if I remove <code>v.</code> and leave only <code>form()</code> still doesn't work</p>