- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
最近我创建了一个插件,它是一个表单验证插件。它有几个不同的选项,其中之一是 onSubmit
。 onSubmit
选项会覆盖您的正常提交功能并阻止任何默认操作,从而允许它用于 ajax 调用。我今天遇到的是,当我在同一页面上有多个实例时,它会尝试一次提交所有实例,即使我没有点击他们的提交按钮。我想因为我对每个实例都使用了 this
关键字,所以这不是问题。显然我错了。现在我不知道该怎么办,也不知道如何让它只对我当时正在处理的任何实例起作用。
下面是插件的完整代码。以及我正在使用的表格示例。我非常困惑,真的需要一些帮助来找出解决方案。
表单
<form id='addSlipForm'>
<section class='form-group col-xs-2'>
<input type='text' class='form-control' id='trip' placeholder='Trip'/>
</section>
<section class='form-group col-xs-2'>
<input type='text' class='form-control' id='trip_date' placeholder='Trip Date'/>
</section>
<section class='form-group col-xs-2'>
<input type='text' class='form-control' id='facility' placeholder='Facility'/>
</section>
<section class='form-group col-xs-2'>
<input type='text' class='form-control' id='minutes' placeholder='Minutes Late'/>
</section>
<section class='form-group col-xs-2'>
<div class='input-group bootstrap-timepicker timepicker'>
<input type='text' class='form-control' id='scheduled_arrival' placeholder='Scheduled Arrival'>
<span class='input-group-addon'><span class='glyphicon glyphicon-time'></span></span>
</div>
</section>
<section class='form-group col-xs-2'>
<section class='btn-group'>
<button type='submit' class='btn btn-primary'>Add</button>
<button type='button' class='btn btn-info'>Add and New</button>
<button type='reset' class='btn btn-danger'>Clear</button>
</section>
</section>
</form>
<form id='searchBar' class='navbar-form navbar-right'>
<section class='form-group'>
<input type='text' class='form-control' id='contract' placeholder='Contract #'/>
</section>
<section class='form-group'>
<input type='text' class='form-control' id='startDate' placeholder='Start Date'/>
</section>
<section class='form-group'>
<input type='text' class='form-control' id='endDate' placeholder='End Date'/>
</section>
<button type='submit' class='btn btn-primary'>Filter Slips</button>
</form>
#searchBar js调用
$('#searchBar').validator({
controls : {
contract : {
validate : 'notEmpty'
},
startDate : {
validate : 'isDateTime',
dateFormat : 'm/d/Y'
},
endDate : {
validate : 'isDateTime',
dateFormat : 'm/d/Y'
}
},
onSubmit : function(){
var contract__id = $('#searchBar').find('#contract').val();
var start_date = $('#searchBar').find('#startDate').val();
var end_date = $('#searchBar').find('#endDate').val();
koolajax.callback(getLateSlipTable(contract__id, start_date, end_date), function getLateSlipTableDone(response){
if(!response.errors){
$('#main').removeClass('hidden');
$('#contractName').data('id', response.contract__id);
$('#contractName').html(response.contract);
$('#lateSlipTable > tbody').html(response.table_rows);
}else{
bootbox.alert(response.error_message);
}
});
}
});
#addSlipForm js调用
$('#addSlipForm').validator({
controls : {
trip : {
validate : 'notEmpty'
},
trip_date : {
validate : ['notEmpty', 'isDateTime'],
dateFormat : 'm/d/Y'
},
facility : {
validate : 'notEmpty'
},
minutes_late : {
validate : ['notEmpty', 'isDigit']
},
scheduled_arrival : {
validate : 'notEmpty'
}
},
onSubmit : function(){
}
});
验证器.js
代码量很大,所以不用发帖,源码在这里
https://github.com/MarkHill89/validator/blob/master/validator.js
注意事项
你会在#addSlipForm js call
下看到onSubmit
是空白的,那是因为我还没有为它提交响应函数,但是你可以看看此时我的困惑来自哪里。所以它显然与实际提交本身无关。这是在提交之前所做的事情,这是显而易见的,但我想我在这里清楚地说明了相关性。
编辑
这是按要求复制此问题的 fiddle 链接 http://jsfiddle.net/8bh0nv76/1/
最佳答案
这里的问题是您在插件中全局创建了一个名为 selectors
的数组,而且只有一次——当插件被插入到页面中时。然后,当有人调用 validator
方法(以初始化您的插件)时,您将选择器插入此数组,并将它用于代码中的几乎所有内容,包括 onSubmit
.
因此,您将面临很多问题,因为您没有创建某个构造函数的实例,您应该为每次有人为其他选择器初始化您的插件时创建(其中包含所有特定属性)。
你在全局声明的变量 _defaults
上也有同样的问题。
Kevin B 修复了 selectors
问题(谢谢!),看看:http://jsfiddle.net/8bh0nv76/2/
关于javascript - 表单插件一次提交所有表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32832357/
我在互联网上搜索了很多小时,但没有找到满意的结果,所以 -VSTO Addin 和 COM Addin(我们作为类库项目制作并使用 Excel 对象)之间有什么区别?VSTO 项目是否有任何限制,例如
我在互联网上搜索了很多小时,但没有找到满意的结果,所以 -VSTO Addin 和 COM Addin(我们作为类库项目制作并使用 Excel 对象)之间有什么区别?VSTO 项目是否有任何限制,例如
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
我正在寻找有关如何构建可扩展 WCF 服务器(具有动态加载的服务)的建议,最好使用 System.Addins 或 MEF。 服务器应托管实现最小“插件”API(StartService/StopSe
有没有一种方法可以使用加载浏览器扩展/插件/插件的 headless 浏览器(即 PhantomJS、Selenium)来运行自动测试? 更具体地说,我想模拟广告拦截器(如 Ghostery、ad-b
我是 gradle 的新手,我使用 artifactory 作为我的 repo 服务器。我在网上查看了如何将我的项目发布到我的 repo 服务器,发现我可以使用 maven-publish 或使用 a
我想禁用某些状态的点击/事件,并仅使少数状态可点击。我通读了http://newsignature.github.io/us-map/处的文档,并且找不到与此问题相关的任何内容。 最佳答案 http:
据我了解,在Intellij中使用idea插件打开Maven构建的项目并不是最好的方法,即调用: mvn idea:idea 但是直接打开pom文件(Intellij有默认的Maven插件);同样的事
使用Artifactory plugin对于 Jenkins pipeline 来说是一种幸福,只要遵循文档就可以了。但后来我介绍了Maven Flatten plugin解析父模块和子模块 mvn
我已经安装了Elasticsearch版本1.7.1。一切正常。我也安装了 JDBC 驱动程序。检查下面我的插件文件夹 目录E:\Xampp\htdocs\my-elastic\elasticsear
在我使用 webpack common chunks 插件创建包含第三方库(如 angular、react、lodash 等)的 vendor 包之前,但后来我知道了 webpack dll
我们正在尝试使用(Jenkins、sonar、eclipse ...)安装 CI 平台。 为了让每个开发人员都可以在提交之前对他的代码进行分析,我想知道两种选择: 使用 Sonar 插件运行本地分析。
我知道这是一个比较特殊的问题。尽管如此,也许有些人知道这一点: 我想在 Eclipse 中使用 Maven 编译 Hector=> 分支:0.7.0 和标签:hector-0.7.0-29(https
我卡住了。我一直在尝试寻找或自己创建一个简单的准系统示例,说明如何为 VS 2010 Express 创建 Outlook 插件。我知道这在 VS 2010 Pro 中更简单,但是,在快速版本中真的不
我有以下排除过滤器来忽略所有 R 文件类: findbugs-exclude-filter.xml 当我将它用于 FindBugs-IDEA 插件时,它可以
我刚开始玩 CakePHP,我发现了 Wildflower CMS .我喜欢这个想法,并打算开始修补它。不过,我有一个问题。 在自述文件中,我发现了以下内容:“Wildflower 不是也不会是 Ca
虽然现在大部分情况都是使用n-api来编写插件,但是底层毕竟是v8(和libuv),使用v8编写简单的插件,同时熟悉v8的使用。 本文介绍在写c++插件时,简单又常用的写法,其实本质上,写插件
本篇是 Python 系列教程第 3 篇,更多内容敬请访问我的 Python 合集 Visual Studio Code的安装非常简单,就不放这里增加文章篇幅了。 相比PyCharm,V
Maven – 插件 什么是 Maven 插件? Maven 实际上是一个依赖插件执行的框架,每个任务实际上是由插件完成。Maven 插件通常被用来: 创建 jar 文件 创建 war
我正在编写一个插件来添加带有标签 [deposit_page] 的页面;该标记应替换为一些 PHP 代码。 这就是我所拥有的,但它不起作用。有什么我遗漏或做错了什么吗? function deposi
我是一名优秀的程序员,十分优秀!