javascript - jQuery 验证在 Bootstrap 模式中不起作用-6ren

javascript - jQuery 验证在 Bootstrap 模式中不起作用

转载作者：搜寻专家更新时间：2023-10-31 23:50:18

我在 Express 应用程序中有一个注册表单。我在前端使用 Bootstrap 。我正在使用 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">&times;</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 代码的答案 How to correctly validate a modal form是因为 express 或 Node 环境，我们将不胜感激任何帮助。
它在这里工作，但在我的本地 Node 服务器上不工作 boostrap 是在应用程序中使用 npm 安装的。 enter image description here如图所示，没有显示错误消息。

最佳答案

您遇到的唯一问题是您的按钮位于 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">&times;</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>

关于javascript - jQuery 验证在 Bootstrap 模式中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53947345/

文章推荐： php - 在 CodeIgniter DataMapper ORM 多对一关系中使用别名字段

文章推荐：关于 Blackberry 9000 问题的 PHP session

文章推荐： php - 不同应用平台之间共享 session

文章推荐： javascript - Nodejs，获取文件的文件类型

twitter-bootstrap - Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别？
有人可以告诉我 Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别吗？最佳答案在 CSS 框架的上下文中，Bootstrap 和 Twitter B
twitter-bootstrap - Bootstrap 文档中的屏幕阅读器是什么？？？ >>>[ Bootstrap 文件]
什么是 Bootstrap 文档中的屏幕阅读器？？？ >>> bootstrap document 不知道什么是屏幕阅读器？最佳答案它是视力不佳或由于某种原因无法从屏幕上阅读的人使用的工具；它会向
twitter-bootstrap - Bootstrap : How do I identify the Bootstrap version?
我想更新网站上的 Bootstrap，但我不知道安装的版本。如何仅使用 bootstrap.css 和 bootstrap.min.js 文件来识别 bootstrap 版本？ CSS 文件中没有版
twitter-bootstrap - Bootstrap.js、Bootstrap.min.js、Bootstrap-table.js 有什么区别
很抱歉问了这么一个愚蠢的问题，但我真的不清楚这些。 Bootstrap 是一个非常棒的库，它节省了开发人员的大量工作。因为它提供了很多功能，比如节省大量时间。响应式功能。一致的设计。便于使用
twitter-bootstrap - 如何使用 ng2-bootstrap 从 Bootstrap 3 切换到 Bootstrap 4？
我正在使用 ng2-bootstrap对于 Angular 2 项目。这个包同时支持Bootstrap 3和4，我安装后默认使用Bootstrap 3。我没有找到任何关于切换的信息。如何从 Boo
twitter-bootstrap - 我在 "ngx-bootstrap"和 "@ng-bootstrap/ng-bootstrap"之间感到困惑
我计划在我的项目中使用 Bootstrap 4 和 angular 4，但我对 npm install --save @ng-bootstrap/ng-bootstrap 和 npm install
twitter-bootstrap - 如何使用 Bootstrap 类将 Bootstrap 警报高度显示为较小的字体？
单击删除按钮后，我设置了警报。但它的默认高度更大，我想让它更小(高度)。我试过 display-4 属性(property)，但它没有工作。我已通过 w-50 将宽度设置为屏幕的一半，但警报的一
twitter-bootstrap - 在 Bootstrap 按钮下拉列表中显示 Bootstrap 选择
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native h
twitter-bootstrap - twitter-bootstrap 中 "bootstrap"这个词的含义
twitter-bootstrap 中的“bootstrap”一词是什么意思？在许多 gem 中都有“bootstrap”这个词。我搜索了其中的含义，但无法得出结论。那么有人可以在这种情况下给出“Bo
twitter-bootstrap - Bootstrap 5 仍然推荐使用 Bootstrap-vue？
由于 Bootstrap 5 不再使用 jQuery 并且正在使用 vanilla JS，我想知道是否仍然建议使用 Bootstrap-Vue，不管 Bootstrap-Vue 还不支持 Bootst
twitter-bootstrap - Bootstrap typeahead 在 Bootstrap 模式中不起作用
我正在使用 codeigniter 框架，我正在使用 bootstrap typeahead，一切都很好，但我的问题是当我将它放在 bootstrap 模式中时，bootstrap typeahead
twitter-bootstrap - Bootstrap 5 引用错误 : bootstrap is not defined
我刚刚完成安装 bootstrap 5 版本 ^5.0.0-alpha1并在 app.js 中导入 Bootstrap import "bootstrap" 其他.js var myModal = n
twitter-bootstrap - Bootstrap ScrollSpy 似乎正在破坏 Bootstrap 选项卡
我一直在尝试在使用选项卡的页面上实现 ScrollSpy。这是我的 body 标签: 这是我的标签 HTML: Home Profile
twitter-bootstrap - Twitter Bootstrap 和 Bootstrap-Xtra
如果您选择使用 Bootstrap-Xtra，您是否应该也包括原始的 bootstrap.css，或者 bootstrap-xtra.css 应该是一个完整的替代品。例如，bootstrap-xtr
twitter-bootstrap - 如何使用 Bootstrap 日期选择器作为输入创建 Bootstrap 框提示符
我正在使用 bootbox 创建一个对话框。 bootbox.dialog({ message: 'Datepicker input: ', title: "Custom label"
twitter-bootstrap - react Bootstrap 中的 Bootstrap "type alignment"
我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap，两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 B
twitter-bootstrap - 为什么 bootstrap 3 中的 bootstrap 默认按钮对我来说是深灰色的？
我正在使用 Bootstrap 3 RC，默认按钮是带有黑色文本的深灰色，而不是带有黑色文本的浅灰色。我已经尝试过 CDN 链接和离线。我还清空了我的浏览器缓存以防万一。有没有其他人经历过这个？这可能
twitter-bootstrap-3 - bootstrap-tagsinput with typeahead, bootstrap-3
在我的一个项目中，我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3
twitter-bootstrap - AngularUI/Bootstrap 是否支持 twitter-bootstrap 3？
下拉菜单在 Angular-UI-Bootstrap 中不起作用？使用 Bootstrap-3 CSS 以下是代码。链接Click me for a dropdown出现。但不会在点击时切换。怎么了？
twitter-bootstrap - 如何在 Bootstrap Table 中添加 Bootstrap 按钮
如何在 Bootstrap Table 中添加 Bootstrap 按钮最佳答案我已经想出了解决办法。我想和大家分享。这是我的 table : # Visit

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery 验证在 Bootstrap 模式中不起作用