title: Validate form inputs via ajax (form in bootstrap modal)
body: <p>I have a form into a bootstrap modal 3. How can I validate the input fields marked with a * ? I have tried to set required in the class for the first input field as a test but it's not working.
  If i change the url to a non existant file, it gives me the error message otherwise it's always the success message. Is the only reason here the validation?</p>
  
  <pre><code>                        &lt;div class="modal fade" id="cta-aut-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
                          &lt;div class="modal-dialog"&gt;
                              &lt;div class="modal-body"&gt;
                                  &lt;div class="modal-content"&gt;
                                      &lt;div class="modal-header"&gt;
                                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Vraag uw demo aan&lt;/h4&gt;
                                      &lt;/div&gt;
                                      &lt;div class="modal-body"&gt;
  
  
                      &lt;div class="style-msg successmsg" id="contact-form-result2"&gt;&lt;/div&gt;
                      &lt;div class="style-msg errormsg" id="contact-form-result3"&gt;&lt;/div&gt;
  
                      &lt;form class="nobottommargin" id="template-contactform" name="template-contactform"&gt;
  
                          &lt;div class="form-process"&gt;&lt;/div&gt;
  
                          &lt;div class="col_one_third"&gt;
                              &lt;label for="template-contactform-firstname"&gt;Voornaam &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="text" id="template-contactform-firstname" name="template-contactform-firstname" value="" class="required sm-form-control " /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col_one_third"&gt;
                              &lt;label for="template-contactform-lastname"&gt;Achternaam &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="text" id="template-contactform-lastname" name="template-contactform-lastname" value="" class=" sm-form-control " /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col_one_third col_last"&gt;
                              &lt;label for="template-contactform-email"&gt;Email &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="text" id="template-contactform-email" name="template-contactform-email" value="" class=" sm-form-control" /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="clear"&gt;&lt;/div&gt;
  
                          &lt;div class="col_one_third"&gt;
                              &lt;label for="template-contactform-website"&gt;Website URL &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="text" id="template-contactform-website" name="template-contactform-website" value="" class="sm-form-control " /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col_one_third"&gt;
                              &lt;label for="template-contactform-phone"&gt;Telefoon &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control " /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col_one_third col_last"&gt;
                              &lt;label for="template-contactform-role"&gt;Uw functie &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="text" id="template-contactform-role" name="template-contactform-role" value="" class=" sm-form-control" /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="clear"&gt;&lt;/div&gt;
  
                          &lt;div class="col_full"&gt;
                              &lt;label for="template-contactform-message"&gt;Wat is uw belangrijkste uitdaging op het vlak van marketing en verkoop?&lt;/label&gt;
                              &lt;textarea class="sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col_full hidden"&gt;
                              &lt;input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" /&gt;
                          &lt;/div&gt;
  
                      &lt;/form&gt;
  
  
  
  
                                      &lt;/div&gt;
                                      &lt;div class="modal-footer"&gt;
                                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Sluiten&lt;/button&gt;
                                          &lt;button class="btn btn-success" id="submit1234"&gt;Verzenden&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>For the javascript:</p>
  
  <pre><code>                        &lt;script type="text/javascript"&gt;
  
  $(function() {
  //twitter bootstrap script
  $("button#submit1234").click(function(){
          $.ajax({
            type: "POST",
            url: "cta-aut.php",
            data: $('form.template-contactform').serialize(),
            success: function(response){
  
                  $("#contact-form-result2").html('&lt;div style="padding:10px;"&gt;&lt;i class=icon-ok-sign&gt;&lt;/i&gt; Uw demo aanvraag is verzonden. Wij contacteren u zo spoedig mogelijk!&lt;/div&gt;');
                  //$("#cta-aut-modal").modal('hide');    
            },
  
            error: function(){
                  $("#contact-form-result3").html('&lt;div style="padding:10px;"&gt;&lt;i class=icon-remove&gt;&lt;/i&gt; Uw bericht is niet verzonden!&lt;/div&gt;');
            }
          });
      });
  });
  
                      &lt;/script&gt;
  </code></pre>
  
  <p>And finally the php script cta-aut.php</p>
  
  <pre><code>&lt;?php
  if (isset($_POST['template-contactform-firstname'])) {
  
  // Values from form
  
  }
  ?&gt;
  </code></pre>
  
  <p>If i set the if statement to a non existant value like template-contactform-firstname1 it's also a success from the ajax call. I think the ajax must have the error message???</p>