[英]JavaScript Validator bind all buttons click event
I am using this JS validate plugin and it is working, but it will intercept all button clicks in the page and is trying to validate the form even I click Back to Home
. 我正在使用此JS validate插件 ,它正在运行,但是它将拦截页面中的所有按钮单击,并且即使我单击Back to Home
,也试图验证表单。
I only want the form to validate when I click the login
button, when I click the Back to Home
button I do not need to validate the form, just submit and redirect to the home page. 我只希望表单在单击“ login
按钮时进行验证,当我单击“ Back to Home
按钮时,我不需要对表单进行验证,只需提交并重定向到主页即可。
The reason I am still submitting the form on the Back to Home
click event is because I need to capture the email address for use in my Controller. 我仍在“ Back to Home
单击事件上提交表单的原因是,我需要捕获要在Controller中使用的电子邮件地址。
How can I only capture the click events of the Login
and Back to Home
buttons? 如何仅捕获“ Login
和“ Back to Home
按钮的单击事件?
Is it possible to stop the form from being validated when I click the Back to Home
button? 当我单击“ Back to Home
按钮时,是否可以停止验证表单?
HTML & JS Code: HTML和JS代码:
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" data-action="login">Login</button>
<button type="button" class="btn btn-danger" data-action="backtohome" >Back To Home</button>
</div>
</form>
<script src="http://127.0.0.1/js/validator.min.js"></script>
<script type="text/javascript">
$('.btn').on('click', function(event) {
event.preventDefault();
var action = $(this).data('action');
if (action !== "nil")
{
$('#action').val(action);
var form = $("form");
form.submit();
}
});
</script>
The reason this is happening is because your binding the click events of any button with the class of .btn
. 发生这种情况的原因是因为您将任何按钮的单击事件与.btn
类.btn
。
To avoid this you can bind the click events of only the buttons you need by adding an id
to the form-group
that contains your login
and back to home
buttons. 为了避免这种情况,您可以通过将id
添加到包含login
和back to home
按钮的form-group
,从而仅绑定所需按钮的单击事件。
<div id='form-actions' class="form-group">
<button type="button" class="btn btn-primary" data-action="login">Login</button>
<button type="button" class="btn btn-danger" data-action="backtohome" >Back To Home</button>
</div>
Modify your jQuery to only capture the #form-actions
button click events 修改jQuery以仅捕获#form-actions
按钮单击事件
$('#form-actions button').on('click', function(event) {
event.preventDefault();
var action = $(this).data('action'),
form = $("form");
if (action == 'backtohome') {
$('form').validator('destroy');
}
if (action !== "nil") {
$('#action').val(action);
}
form.submit();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.