jquery.onsubmit 不触发
jquery .onsubmit doesnt trigger
我几个小时以来因为问题被屏蔽了。
我想触发 .submit 事件并在验证之前进行测试。但是当我调试时,如果我在 $("#btnSub").submit 上放置一个断点,它会检测到但只是结束而不执行我的代码。
//on submit
//_________________________________________________________
$('#btnSubs').submit(function(e) {
//Check if form is already shown
if ($('#collapseState').val() === "true") {
//Check content before send
//--------------------------------------------------------------------------------------------------------------------------------------
var valid = (chckPseudo() === true) && (chckMail() === true) && (chckMail2() === true) && (chckPWD() === true); //define a valid flag
if (valid) {
//disable the btn to avoid multiple connections
$(this).button('loading');
//submit the form
return true;
} else {
if (chckPseudo())
formValidate("grpPseudo", "correct");
else
formValidate("grpPseudo", "incorrect");
if (chckMail())
formValidate("grpMail", "correct");
else
formValidate("grpMail", "incorrect");
if (chckMail2())
formValidate("grpMail2", "correct");
else
formValidate("grpMail2", "incorrect");
if (chckPWD())
formValidate("grpPSW", "correct");
else
formValidate("grpPSW", "incorrect");
//dont submit
e.preventDefault();
return false;
}
}
//show form
else {
$('#collapseSubscribe').collapse('show');
$('#collapseState').val("true");
// don't submit the form
e.preventDefault();
return false;
}
});
如果你能给我一些线索,那将非常非常友好(恼怒)
(我知道代码有效,因为在我使用 .click 事件之前,不,我没有忘记提交表单和按钮类型)
谢谢!!
万一html
<div id="logIndex">
<h3>Toute question a une réponse</h3>
<form method="post" id="reg" action="">
<div class="collapse" id="collapseSubscribe">
<div class="form-group" id="grpPseudo">
<label class="control-label sr-only" for="psdo">Pseudo</label>
<input type="text" class="form-control" placeholder="Pseudo :" id="psdo" /><br>
<span aria-hidden="true"></span>
<span id="psdo" class="sr-only"></span>
</div>
<div class="form-group" id="grpMail">
<label class="control-label sr-only" for="mail">Email</label>
<input type="email" class="form-control" placeholder="Email :" id="mail"/><br>
<span aria-hidden="true"></span>
<span id="Email" class="sr-only"></span>
</div>
<div class="form-group" id="grpMail2">
<label class="control-label sr-only" for="mail2">Confirmer email</label>
<input type="email" class="form-control" placeholder="Confirmez email :" id="mail2"/><br>
<span aria-hidden="true"></span>
<span id="Email2" class="sr-only"></span>
</div>
<div class="form-group" id="grpPSW">
<label class="control-label sr-only" for="psw">Mot de Passe</label>
<input type="password" class="form-control" placeholder="Mot de passe :" id="psw"/>
<span aria-hidden="true"></span>
<span id="pwd" class="sr-only"></span>
</div>
<p id="conditions">En vous cliquant sur S'inscrire,vous acceptez nos conditions et reconnaissez que vous avez lu notre politique d'utilisation des données</p>
</div>
<button class="btn btn-primary btn-block" data-loading-text="<img src='./ressources/loading.GIF' alt='chargement...'>" type="submit" id="btnSubs" >
S'inscrire
</button>
</form>
ou <a href="" data-toggle="modal" data-target="#myModal">Se Connecter</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Se Connecter</h4>
</div>
<!-- <form id="login_form" method="post" action=""> -->
<div class="modal-body">
<input type="text" class="form-control" placeholder="Pseudo ou Email :"/><br>
<input type="text" class="form-control" placeholder="Mot de Passe :"/>
</div>
<!--</form>-->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Se Connecter</button>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------->
<!-- collapse State -->
<input type="hidden" value="false" id="collapseState">
<!-- My CSS <link rel="stylesheet" href="./MyStyle.css">-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="./scripts/renders.js"></script>
<script src="./valider.js"></script>
<script src="./scripts/Observer.js"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover();
})
</script>
<script>javascript:(function() {
var s = document.createElement("script");
s.onload = function() {
bootlint.showLintReportForCurrentDocument([]);
};
s.src = "https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";
document.body.appendChild(s)
})();</script>
根据评论,问题出现是因为你绑定了onsubmit
事件提交按钮,但是没有这样的事件按钮。
onsubmit 事件是 HTMLFormElement 的一个事件,所以你需要select你的表单并监听它的事件:
$('form').submit(function() {
// your code
});
我几个小时以来因为问题被屏蔽了。 我想触发 .submit 事件并在验证之前进行测试。但是当我调试时,如果我在 $("#btnSub").submit 上放置一个断点,它会检测到但只是结束而不执行我的代码。
//on submit
//_________________________________________________________
$('#btnSubs').submit(function(e) {
//Check if form is already shown
if ($('#collapseState').val() === "true") {
//Check content before send
//--------------------------------------------------------------------------------------------------------------------------------------
var valid = (chckPseudo() === true) && (chckMail() === true) && (chckMail2() === true) && (chckPWD() === true); //define a valid flag
if (valid) {
//disable the btn to avoid multiple connections
$(this).button('loading');
//submit the form
return true;
} else {
if (chckPseudo())
formValidate("grpPseudo", "correct");
else
formValidate("grpPseudo", "incorrect");
if (chckMail())
formValidate("grpMail", "correct");
else
formValidate("grpMail", "incorrect");
if (chckMail2())
formValidate("grpMail2", "correct");
else
formValidate("grpMail2", "incorrect");
if (chckPWD())
formValidate("grpPSW", "correct");
else
formValidate("grpPSW", "incorrect");
//dont submit
e.preventDefault();
return false;
}
}
//show form
else {
$('#collapseSubscribe').collapse('show');
$('#collapseState').val("true");
// don't submit the form
e.preventDefault();
return false;
}
});
如果你能给我一些线索,那将非常非常友好(恼怒) (我知道代码有效,因为在我使用 .click 事件之前,不,我没有忘记提交表单和按钮类型) 谢谢!!
万一html
<div id="logIndex">
<h3>Toute question a une réponse</h3>
<form method="post" id="reg" action="">
<div class="collapse" id="collapseSubscribe">
<div class="form-group" id="grpPseudo">
<label class="control-label sr-only" for="psdo">Pseudo</label>
<input type="text" class="form-control" placeholder="Pseudo :" id="psdo" /><br>
<span aria-hidden="true"></span>
<span id="psdo" class="sr-only"></span>
</div>
<div class="form-group" id="grpMail">
<label class="control-label sr-only" for="mail">Email</label>
<input type="email" class="form-control" placeholder="Email :" id="mail"/><br>
<span aria-hidden="true"></span>
<span id="Email" class="sr-only"></span>
</div>
<div class="form-group" id="grpMail2">
<label class="control-label sr-only" for="mail2">Confirmer email</label>
<input type="email" class="form-control" placeholder="Confirmez email :" id="mail2"/><br>
<span aria-hidden="true"></span>
<span id="Email2" class="sr-only"></span>
</div>
<div class="form-group" id="grpPSW">
<label class="control-label sr-only" for="psw">Mot de Passe</label>
<input type="password" class="form-control" placeholder="Mot de passe :" id="psw"/>
<span aria-hidden="true"></span>
<span id="pwd" class="sr-only"></span>
</div>
<p id="conditions">En vous cliquant sur S'inscrire,vous acceptez nos conditions et reconnaissez que vous avez lu notre politique d'utilisation des données</p>
</div>
<button class="btn btn-primary btn-block" data-loading-text="<img src='./ressources/loading.GIF' alt='chargement...'>" type="submit" id="btnSubs" >
S'inscrire
</button>
</form>
ou <a href="" data-toggle="modal" data-target="#myModal">Se Connecter</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Se Connecter</h4>
</div>
<!-- <form id="login_form" method="post" action=""> -->
<div class="modal-body">
<input type="text" class="form-control" placeholder="Pseudo ou Email :"/><br>
<input type="text" class="form-control" placeholder="Mot de Passe :"/>
</div>
<!--</form>-->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Se Connecter</button>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------->
<!-- collapse State -->
<input type="hidden" value="false" id="collapseState">
<!-- My CSS <link rel="stylesheet" href="./MyStyle.css">-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="./scripts/renders.js"></script>
<script src="./valider.js"></script>
<script src="./scripts/Observer.js"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover();
})
</script>
<script>javascript:(function() {
var s = document.createElement("script");
s.onload = function() {
bootlint.showLintReportForCurrentDocument([]);
};
s.src = "https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";
document.body.appendChild(s)
})();</script>
根据评论,问题出现是因为你绑定了onsubmit
事件提交按钮,但是没有这样的事件按钮。
onsubmit 事件是 HTMLFormElement 的一个事件,所以你需要select你的表单并监听它的事件:
$('form').submit(function() {
// your code
});