javascript - jQuery验证在引导模式下不起作用
问题描述
我在一个快速应用程序中有一个注册表单。我在前端使用引导程序。我正在使用 jQuery 验证插件来验证姓名、电子邮件、电话号码等格式，但它不起作用。这是页面的 HTML 布局。
$("#modalForm").validate({
rules: {
nameModal: {
required: true,
minlength: 8
},
emailModal: {
required: true,
minlength: 5
},
numberModal: {
required: true,
minlength: 12
},
},
messages: {
nameModal: {
required: "Please enter name",
minlength: "Your data must be at least 8 characters"
},
emailModal: {
required: "Please enter email",
minlength: "Your data must be at least 5 characters"
},
numberModal: {
required: "Please enter number",
minlength: "Number should be atleast 9 character"
},
}
});body {
background-color: whitesmoke;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 1%;
}
.form-links {
text-align: center;
margin-bottom: 50px;
padding-bottom: 4px;
}
.form-links a {
color: #fff;
}
.formbtn{
background-color: #5d5d5d;
border-color: #d6d6c2;
font-size: 20px;
}
div.login{
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
margin-bottom: 8%;
padding: 4%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.float-right a{
color: #5d5d5d;
}
.float-right a:hover {
color: white;
}
/* The signup modal code */
.signup{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.modalcolor{
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
padding: 2%;
border-radius: 10px;
}<head>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/myJs/login.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 login">
<form method="POST">
<h3>Gramleys</h3>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="email" placeholder="Email" required id="emailLogin" />
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" id="loginPass" />
</div>
<br>
<button type="submit" name="login" class="btn btn-lg btn-primary formbtn">Login</button>
<button type="button" name="create" class="btn btn-lg btn-primary formbtn" data-toggle="modal" data-target="#exampleModal">Create</button>
<br>
<div class="float-right">
<a href="#" class="float-right">Forgot password</a>
</div>
</form>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade signup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modalcolor">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Signup</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form method="POST" role="form" id="modalForm">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="emailModal" placeholder="Email" id="emailModal" required/>
</div>
<div class="form-group">
<label for="InputName">Full Name</label>
<input type="text" class="form-control" name="nameModal" placeholder="Name" required id="nameModal" required/>
</div>
<div class="form-group">
<label for="InputPassword">Select Password</label>
<input type="password" class="form-control" name="passModal" placeholder="Password" id="passModal" />
</div>
<div class="form-group">
<label for="InputNumber">Mobile Number</label>
<input type="text" class="form-control" name="numberModal" min="1" max="10" placeholder="Mobile Number" required id="numberModal">
</div>
<div class="row">
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Age</label>
<input style="display: block;"type="number" class="form-control " name="ageModal" min="10" max="100" placeholder="Age" required id="ageModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Weight(kg)</label>
<input style="display: block;" type="number" class="form-control " name="weightModal" min="30" max="150" placeholder="Weight" required id="weightModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Height(cms)</label>
<input style="display: block;" type="number" class="form-control " name="heightModal" min="100" max="200" placeholder="Height" required id="heightModal">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-secondary">Create</button>
</div>
</div>
</div>
</div>为什么 jQuery 验证器不起作用？我一直在努力解决它，但它不起作用，请帮助我解决这个问题。我已经查看了有关 stackoverflow 的其他答案，但似乎没有一个可以解决此问题。这是我从上面的 js 代码获取的答案如何正确验证模态表单 是因为 express 还是 node 环境，任何帮助将不胜感激。
它在这里工作，但在我的本地节点服务器上不起作用 boostrap 是在应用程序中使用 npm 安装的。在此处输入图像描述没有显示错误消息，如图所示。
解决方案
您遇到的唯一问题是您的按钮位于form不会触发表单提交事件的外部，因此您的表单未针对它进行验证。
您可以将该按钮放在表单中，也可以通过此验证它
$(".createButton").click(function(e){
if(!$('#modalForm').valid()){
e.preventDefault()
}
})
$(".createButton").click(function(e) {
if (!$('#modalForm').valid()) {
e.preventDefault()
}
})
$("#modalForm").validate({
rules: {
nameModal: {
required: true,
minlength: 8
},
emailModal: {
required: true,
minlength: 5
},
numberModal: {
required: true,
minlength: 12
},
},
messages: {
nameModal: {
required: "Please enter name",
minlength: "Your data must be at least 8 characters"
},
emailModal: {
required: "Please enter email",
minlength: "Your data must be at least 5 characters"
},
numberModal: {
required: "Please enter number",
minlength: "Number should be atleast 9 character"
},
}
});body {
background-color: whitesmoke;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 1%;
}
.form-links {
text-align: center;
margin-bottom: 50px;
padding-bottom: 4px;
}
.form-links a {
color: #fff;
}
.formbtn {
background-color: #5d5d5d;
border-color: #d6d6c2;
font-size: 20px;
}
div.login {
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
margin-bottom: 8%;
padding: 4%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.float-right a {
color: #5d5d5d;
}
.float-right a:hover {
color: white;
}
/* The signup modal code */
.signup {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.modalcolor {
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
padding: 2%;
border-radius: 10px;
}<head>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/myJs/login.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 login">
<form method="POST">
<h3>Gramleys</h3>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="email" placeholder="Email" required id="emailLogin" />
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" id="loginPass" />
</div>
<br>
<button type="submit" name="login" class="btn btn-lg btn-primary formbtn">Login</button>
<button type="button" name="create" class="btn btn-lg btn-primary formbtn" data-toggle="modal" data-target="#exampleModal">Create</button>
<br>
<div class="float-right">
<a href="#" class="float-right">Forgot password</a>
</div>
</form>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade signup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modalcolor">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Signup</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form method="POST" role="form" id="modalForm">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="emailModal" placeholder="Email" id="emailModal" required/>
</div>
<div class="form-group">
<label for="InputName">Full Name</label>
<input type="text" class="form-control" name="nameModal" placeholder="Name" required id="nameModal" required/>
</div>
<div class="form-group">
<label for="InputPassword">Select Password</label>
<input type="password" class="form-control" name="passModal" placeholder="Password" id="passModal" />
</div>
<div class="form-group">
<label for="InputNumber">Mobile Number</label>
<input type="text" class="form-control" name="numberModal" min="1" max="10" placeholder="Mobile Number" required id="numberModal">
</div>
<div class="row">
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Age</label>
<input style="display: block;" type="number" class="form-control " name="ageModal" min="10" max="100" placeholder="Age" required id="ageModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Weight(kg)</label>
<input style="display: block;" type="number" class="form-control " name="weightModal" min="30" max="150" placeholder="Weight" required id="weightModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Height(cms)</label>
<input style="display: block;" type="number" class="form-control " name="heightModal" min="100" max="200" placeholder="Height" required id="heightModal">
</div>
</div>
</form>
</div>
</div>
<div>
<div class="modal-footer"> <button type="submit" class="createButton btn btn-secondary">Create</button></div>
</div>
</div>
</div>
</div>推荐阅读
- python - 在 GeoPandas 数据框中识别点（nan nan）
- sql - 如何在 SQL Server 中将 varchar 转换为日期
- sql - Bigquery 查询以获取在斜线后与特定模式匹配的所有出现
- python - 从 MulinomialNB 中提取对数概率
- json-rpc - 比特币发送到地址——那些该死的费用解释了吗？
- reactjs - React Jest - 即使在添加了 mockFiles 和 identity-obj-proxy 之后，测试套件也无法为 PNG 文件运行
- c# - 使用条件从 DataTable 中删除重复行 - C#
- typescript - 如何在 typescript eslint 中强制执行文件名和文件夹名称约定？
- javascript - 来自后端的实时计算页面
- node.js - 当我运行 create-creat-app
低于错误