javascript - Bootstrap Validator 提交模式框不起作用

Question

我的模态框中的 BootstrapValidator 插件有问题。

这是我的html代码

<div class="modal fade" id="controlloMail" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Verifica Recapiti</h4>
            </div>
            <div class="modal-body">Al fine di permettere la buona diffusione di informazioni relative alle iscrizioni, ti chiediamo di verificare ed eventualmente correggere i dati di contatto in nostro possesso relativi all'utente principale di questa societ&agrave;.<br>Se sono stati inseriti utenti secondari, loro stessi avranno la possibilit&agrave; di verificare e correggere i loro dati.<br><br>
                <form id="contact-form">
                    <div class="form-group">
                        <label class="label label-info" for="mail1">Email Primaria</label>
                        <input type="email" name="mail1" id="mail1" class="form-control" value="" required>
                    </div>
                    <div class="form-group">
                        <label class="label label-info" for="mail2">Email Secondaria (facoltativo)</label>
                        <input type="email" name="mail2" id="mail2" class="form-control" value="">
                    </div>
                    <div class="form-group">
                        <label class="label label-info" for="cell">Cellulare</label>
                        <input type="text" data-bv-integer="true" name="cell" id="cell" class="form-control" value="" data-rule-required="true" >
                    </div>
                    <div class="form-group">
                        <label class="label label-info" for="nome">Titolare Cellulare</label>
                        <div class="row">
                          <div class="col-xs-6">
                            <input type="text" class="form-control" id="nome" placeholder="Nome" name="nome" value="" required>
                          </div>
                          <div class="col-xs-6">
                            <input type="text" class="form-control" id="cognome" placeholder="Cognome" name="cognome" value="" required>
                          </div>
                        </div>
                    </div>
                    <input type="hidden" name="soc" value="<?php echo $_SESSION['societaLogin'];?>"><input type="hidden" name="aa" value="<?php echo $AA;?>">
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success" id="aggiornaContatti" name="aggiornaContatti">Aggiorna</button>
            </div>
        </div>
    </div>
</div>

这是我的 JS 代码

$(document).ready(function(){
            $("#cell").keypress(function (e) {
                //if the letter is not digit then display error and don't type anything
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                        return false;
                }
            });


            $("#gestioneRecapiti").click(function(){
                $('#controlloMail').modal({
                  backdrop: 'static',
                  keyboard: false
                });
            });

            $('#controlloMail').modal({
              backdrop: 'static',
              keyboard: false
            });


            $('#contact-form').bootstrapValidator({
                    excluded: [':disabled'],
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        mail1: {
                            //message: 'Indirizzo email non valido',
                            validators: {
                                notEmpty: {
                                    message: 'Email richiesta e non pu&ograve; essere vuoto.'
                                },
                                emailAddress: {
                                    message: 'Non &egrave; un indirizzo email valido.'
                                }
                            }
                        },
                        cell: {
                            validators: {
                                notEmpty: {
                                    message: 'Numero di cellulare richiesto e non pu&ograve; essere vuoto.'
                                }
                            }
                        },
                        nome: {
                            validators: {
                                notEmpty: {
                                    message: 'Nome titolare richiesto e non pu&ograve; essere vuoto.'
                                },
                                stringLength: {
                                    min: 3,
                                    max: 30,
                                    message: 'Il nome deve contenere almeno 6 caretteri.'
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z]+$/,
                                    message: 'Il nome deve essere formato solo da lettere.'
                                }
                            }
                        },
                        cognome: {
                            validators: {
                                notEmpty: {
                                    message: 'Cognome titolare richiesto e non pu&ograve; essere vuoto.'
                                },
                                stringLength: {
                                    min: 3,
                                    max: 30,
                                    message: 'Il cognome deve contenere almeno 6 caretteri.'
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z]+$/,
                                    message: 'Il cognome deve essere formato solo da lettere.'
                                }
                            }
                        }
                    },
                  submitButtons: '#aggiornaContatti'
                }).on('success.form.bv', function(e) {
                    $.ajax({
                        type: "POST",
                        url: "aggiornaContatti.php", //process to mail
                        data: $('#contact-form').serialize(),
                        success: function(msg){
                            //$("#thanks").html(msg) //hide button and show thank you
                            $("#controlloMail").modal('hide'); //hide popup  
                        },
                        error: function(){
                            alert("Errore");
                        }
                    });
                });
        });

问题是它不会在提交事件时验证我的表单，而只会在文本框的 onblur 中验证。

你可以试试 JSFiddle http://jsfiddle.net/ozr34efh/1/

谢谢;)

Answer 1

尝试关注链接:
将按钮放在表单内:

HTML:

<div class="modal fade" id="controlloMail" data-backdrop="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Verifica Recapiti</h4>
                </div>
                <div class="modal-body">Al fine di permettere la buona diffusione di informazioni relative alle iscrizioni, ti chiediamo di verificare ed eventualmente correggere i dati di contatto in nostro possesso relativi all'utente principale di questa societ&agrave;.<br>Se sono stati inseriti utenti secondari, loro stessi avranno la possibilit&agrave; di verificare e correggere i loro dati.<br><br>
                    <form id="contact-form">
                        <div class="form-group">
                            <label class="label label-info" for="mail1">Email Primaria</label>
                            <input type="email" name="mail1" id="mail1" class="form-control" value=""/>
                        </div>
                        <div class="form-group">
                            <label class="label label-info" for="mail2">Email Secondaria (facoltativo)</label>
                            <input type="email" name="mail2" id="mail2" class="form-control" value=""/>
                        </div>
                        <div class="form-group">
                            <label class="label label-info" for="cell">Cellulare</label>
                            <input type="text" data-bv-integer="true" name="cell" id="cell" class="form-control" value="" data-rule-required="true"/>
                        </div>
                        <div class="form-group">
                            <label class="label label-info" for="nome">Titolare Cellulare</label>
                            <div class="row">
                              <div class="col-xs-6">
                                  <input type="text" class="form-control" id="nome" placeholder="Nome" name="nome" value=""/>
                              </div>
                              <div class="col-xs-6">
                                  <input type="text" class="form-control" id="cognome" placeholder="Cognome" name="cognome" value=""/>
                              </div>
                            </div>
                        </div>
                        <input type="hidden" name="soc" value="<?php echo $_SESSION['societaLogin'];?>"><input type="hidden" name="aa" value="<?php echo $AA;?>">

                </div>

                <div class="modal-footer">
                    <input type="submit" class="btn btn-success" value="submit" id="aggiornaContatti" name="aggiornaContatti"/>
                </div>
                             </form>
            </div>
        </div>
    </div>

Demo