Javascript 通过ajax验证表单输入（引导模式中的表单）

我有一个进入引导模式3的表单。如何验证标记为*的输入字段？我试图在类中为第一个输入字段设置required作为测试，但它不起作用。 如果我将url更改为不存在的文件，它会给我错误消息，否则它总是成功消息。验证的唯一原因是什么

                        <div class="modal fade" id="cta-aut-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-body">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalLabel">Vraag uw demo aan</h4>
                                    </div>
                                    <div class="modal-body">


                    <div class="style-msg successmsg" id="contact-form-result2"></div>
                    <div class="style-msg errormsg" id="contact-form-result3"></div>

                    <form class="nobottommargin" id="template-contactform" name="template-contactform">

                        <div class="form-process"></div>

                        <div class="col_one_third">
                            <label for="template-contactform-firstname">Voornaam <small>*</small></label>
                            <input type="text" id="template-contactform-firstname" name="template-contactform-firstname" value="" class="required sm-form-control " />
                        </div>

                        <div class="col_one_third">
                            <label for="template-contactform-lastname">Achternaam <small>*</small></label>
                            <input type="text" id="template-contactform-lastname" name="template-contactform-lastname" value="" class=" sm-form-control " />
                        </div>

                        <div class="col_one_third col_last">
                            <label for="template-contactform-email">Email <small>*</small></label>
                            <input type="text" id="template-contactform-email" name="template-contactform-email" value="" class=" sm-form-control" />
                        </div>

                        <div class="clear"></div>

                        <div class="col_one_third">
                            <label for="template-contactform-website">Website URL <small>*</small></label>
                            <input type="text" id="template-contactform-website" name="template-contactform-website" value="" class="sm-form-control " />
                        </div>

                        <div class="col_one_third">
                            <label for="template-contactform-phone">Telefoon <small>*</small></label>
                            <input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control " />
                        </div>

                        <div class="col_one_third col_last">
                            <label for="template-contactform-role">Uw functie <small>*</small></label>
                            <input type="text" id="template-contactform-role" name="template-contactform-role" value="" class=" sm-form-control" />
                        </div>

                        <div class="clear"></div>

                        <div class="col_full">
                            <label for="template-contactform-message">Wat is uw belangrijkste uitdaging op het vlak van marketing en verkoop?</label>
                            <textarea class="sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
                        </div>

                        <div class="col_full hidden">
                            <input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
                        </div>

                    </form>




                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
                                        <button class="btn btn-success" id="submit1234">Verzenden</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

对于javascript：

                        <script type="text/javascript">

$(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('<div style="padding:10px;"><i class=icon-ok-sign></i> Uw demo aanvraag is verzonden. Wij contacteren u zo spoedig mogelijk!</div>');
                //$("#cta-aut-modal").modal('hide');    
          },

          error: function(){
                $("#contact-form-result3").html('<div style="padding:10px;"><i class=icon-remove></i> Uw bericht is niet verzonden!</div>');
          }
        });
    });
});

                    </script>

最后是php脚本cta-aut.php

<?php
if (isset($_POST['template-contactform-firstname'])) {

// Values from form

}
?>

---

如果我将If语句设置为不存在的值，比如template-contactform-firstname1，那么ajax调用也会成功。我认为ajax一定有错误消息？？？

我不是javascript专家，但请尝试更改：

data: $('form.template-contactform').serialize(),

到

---

我这里有同样的结果。如果我将url更改为不存在的文件，则会显示错误消息。否则我就不是了。我已经更新了我的问题。

data: $('#template-contactform').serialize(),