title: Validate form before submitting -JSP
body: <p>in my JSP page i created a form, </p>
  
  <pre><code>&lt;form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
              action="genericDatabaseLoad" method="post" onsubmit="validateDBFom()"&gt;
              &lt;fieldset&gt;
              &lt;input type="radio" name="connectionType" value="jdbcConnection"&gt;&amp;nbsp;&amp;nbsp;&lt;b&gt;&lt;s:text name="global.genericdb_jdbc_connection" /&gt;&lt;/b&gt;
  
  
              &lt;div class="dbConnection" id="jdbcConnection" style="display: none; position: relative; left: 30px;"&gt;
              &lt;div class="control-group"&gt;
                      &lt;label class="control-label input-label" for="hostname"&gt;&lt;s:text name="global.genericdb_hostname" /&gt; :
                      &lt;span class="requiredField"&gt; * &lt;/span&gt;
                      &lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="text" class="inputstyle" id="dbHostname" name="hostname" placeholder="&lt;s:text name="global.genericdb_hostname" /&gt;" required="required" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label input-label" for="port"&gt;&lt;s:text name="global.genericdb_port" /&gt; :
                      &lt;span class="requiredField"&gt; * &lt;/span&gt;
                      &lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="text" class="inputstyle" name="port" placeholder="&lt;s:text name="global.genericdb_port" /&gt;" required="required" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label input-label" for="dbname"&gt;&lt;s:text name="global.genericdb_databasename" /&gt;:&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="text" class="inputstyle" name="dbname" placeholder="&lt;s:text name="global.genericdb_databasename" /&gt;"
                              required="required" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label input-label" for="username"&gt;&lt;s:text name="global.genericdb_username" /&gt; :
                      &lt;span class="requiredField"&gt; * &lt;/span&gt;
                      &lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="text" class="inputstyle" name="username" placeholder="&lt;s:text name="global.genericdb_username" /&gt;" required="required" /&gt;
                          &lt;label class="input-tip"&gt;&lt;s:text name="global.genericdb_username_info" /&gt;&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label input-label" for="password"&gt;&lt;s:text name="global.genericdb_password" /&gt;:&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="password" class="inputstyle" name="password" placeholder="&lt;s:text name="global.genericdb_password" /&gt;" /&gt;
                          &lt;label class="input-tip"&gt;&lt;s:text name="global.genericdb_password_info" /&gt;&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;input type="radio" name="connectionType" value="jndiConnection"&gt;&amp;nbsp;&amp;nbsp;&lt;b&gt;&lt;s:text name="global.genericdb_jndi_connection" /&gt;&lt;/b&gt;
                  &lt;div class="dbConnection" id="jndiConnection" style="display: none; position: relative; left: 30px;"&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label input-label" for="jndidbType"&gt;&lt;s:text name="global.genericdb_jndi_databse" /&gt;:&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;select id="jndidbType" class="inputstyle" name="jndidbType"&gt;
                              &lt;option value="oracle"&gt;Oracle&lt;/option&gt;
                              &lt;option value="sybase"&gt;Sybase&lt;/option&gt;
                              &lt;option value="mssql"&gt;MS SQL&lt;/option&gt;
                              &lt;option value="mysql"&gt;MySQL&lt;/option&gt;
                              &lt;option value="other"&gt;Other&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                          &lt;label class="control-label input-label" for="jndiConnectionString"&gt;&lt;s:text name="global.genericdb_jndi_connection_string" /&gt;:&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;input type="text" class="inputstyle" name="jndiConnectionString"
                                  placeholder="&lt;s:text name="global.genericdb_jndi_connection_string" /&gt;" /&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group" style="position: relative; top: 15px; left: 30px;"&gt;
                      &lt;label class="control-label input-label" for="query"&gt;&lt;s:text name="global.genericdb_query" /&gt; :
                      &lt;span class="requiredField"&gt; * &lt;/span&gt;
                      &lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;textarea name="query" rows="4" placeholder="&lt;s:text name="global.genericdb_query" /&gt;"
                              required="required" &gt;&lt;/textarea&gt;
                          &lt;label class="input-tip"&gt;&lt;s:text name="global.genericdb_query_info" /&gt;&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/fieldset&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>As you can see there is no Submit button inside the <strong>form</strong> I am adding submit button outside of form.</p>
  
  <pre><code>&lt;button type="submit" id="submitbtn" class="btn btn-primary inputstyle" onclick="submitForm();"&gt;SUBMIT&lt;/button&gt;
  </code></pre>
  
  <p>So when I click on submit button, it will submit the form to struts action. JQuery is</p>
  
  <p>JQuery is</p>
  
  <pre><code>&lt;script&gt;
          function submitForm() {
              var $submitform=$('#formId').val();
              $('#'+$submitform).submit(); // $submitform is the id of the form.
              }
  &lt;/script&gt;
  </code></pre>
  
  <p>Jquery to validate the form is</p>
  
  <pre><code>function validateDBFom()
      {
          var selectedVal = "";
          var selected = $("input[type='radio'][name='connectionType']:checked");
          if (selected.length &gt; 0)
          {
              selectedValue = selected.val();
              if(selectedValue=="jdbcConnection")
              {
                  var $dbHostname=$("#dbHostname").val();
                  alert($dbHostname);
                  if($dbHostname==""||$dbHostname==null)
                  {
                      alert("Please fill host name");
                      return false;
                  }
              }
          }
          else
          {
              alert("Please Select Connection Type.");
              return false;
          }   
      }
  </code></pre>
  
  <p>When I click on the submit button without selecting any radio button, it is displaying the correct message. That is, form validation is happening correctly. But if it return false also, the form is still submitting to action. What should I do to stay in the page without submitting if the validation function returns false?</p>