通过 ajax(引导模式中的表单)验证表单输入


Validate form inputs via ajax (form in bootstrap modal)

我有一个自举模态 3 的形式。如何验证标有 * 的输入字段?我试图在类中将第一个输入字段的必需设置为测试,但它不起作用。如果我将 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 语句设置为不存在的值,例如模板-联系人表单-firstname1,那么 ajax 调用也取得了成功。我认为 ajax 必须有错误消息???

我不是javascript的专家,但请尝试更改:

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

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