jQuery Form验证在JSP中不起作用
[英]jQuery Form validation is not working in JSP
问题描述
I am trying to validate a form using jquery with our validation plugin. 
我正在尝试通过我们的验证插件使用jquery验证表单。 When submit the form its redirect to the action page without validating. 提交表单时，无需验证即可将其重定向到操作页面。
Also I Tried by put the isValidFormLogin function in the Index.jsp as well. 我也尝试通过将isValidFormLogin函数放在Index.jsp中。
Index.jsp Index.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap & JavaScripts-->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="Controllers/controllerMain.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap & JavaScripts-->
<title>JQuery</title>
</head>
<body>
<div class="container">
<div class="card mx-auto" style="width: 30rem;">
<div class="card-body">
<h5 class="card-title"></h5>
<form id="formLogin" action="Items.jsp" method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="email" class="form-control" name="username" id="username" aria-describedby="emailHelp" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div>
<button name="btnLogin" id="btnLogin" type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="card-footer">
<a href="#">Forgot Password ?</a>
</div>
<div id="msgLogin">
<% //out.println(MsgLogin); %>
</div>
</div>
</div>
</body>
contollerMain.js contollerMain.js
//Login
$(document).on("click","#btnLogin",function(){
var result = isValidFormLogin();
if(result=="true"){
$("#formLogin").submit();
}
else{
$("#MsgLogin").html(result);
}
});
function isValidFormLogin(){
if($.trim($("#username").val())==""){
return "Enter Username";
}
if($.trim($("#password").val())==""){
return "Enter Password";
}
return "true";
}
3 个解决方案
解决方案1
2 2019-05-21 11:42:47
You need to cancel the event submission first using the event object . 您需要首先使用event对象取消事件提交。
$(document).on("click","#btnLogin",function(event){
// cancel submission
event.preventDefault();
var result = isValidFormLogin();
if(result=="true"){
$("#formLogin").submit();
}
else{
$("#MsgLogin").html(result);
}
});
解决方案2
2 2019-05-21 11:51:07
Submit button has default form submission functionality. 提交按钮具有默认的表单提交功能。 You need to prevent before submitting the form. 您需要先防止提交表单。
$(document).on("click","#btnLogin",function(e){
e.preventDefault();
//your code
});
解决方案3
1 已采纳 2019-05-21 11:44:35
Add prevent default to stop default submit button functionality : 添加prevent默认值以停止默认的submit按钮功能：
$(document).on("click","#btnLogin",function(e){
e.preventDefault();
var result = isValidFormLogin();
if(result=="true"){
$("#formLogin").submit();
}
else{
$("#MsgLogin").html(result);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.