我的模态框中有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à.<br>Se sono stati inseriti utenti secondari, loro stessi avranno la possibilità 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ò essere vuoto.'
},
emailAddress: {
message: 'Non è un indirizzo email valido.'
}
}
},
cell: {
validators: {
notEmpty: {
message: 'Numero di cellulare richiesto e non può essere vuoto.'
}
}
},
nome: {
validators: {
notEmpty: {
message: 'Nome titolare richiesto e non può 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ò 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/
谢谢;）
答案 0 :(得分：2)
尝试关注链接：
将按钮放在表单中：
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à.<br>Se sono stati inseriti utenti secondari, loro stessi avranno la possibilità 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>