Question

我有一个表单进入bootstrap模式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语句设置为不存在的值，例如template-contactform-firstname1，那么ajax调用也是成功的。我认为ajax必须有错误消息???

Answer 1

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

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

到

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

通过ajax验证表单输入（在bootstrap模式中的形式）

1 个答案: