如果输入找到打开的容器,否则什么都不做
If input found open container, otherwise do nothing
我目前正在处理一段代码,如果发现无效的输入,则打开容器,否则什么都不做。
我有一些逻辑下来,但点击事件的容器总是打开和关闭,不管属性值我试图用它来防止这种情况。我想只在容器尚未打开时触发click事件。
我正在使用bootstrap的崩溃功能。
$(document).on("click", ".test", function() {
var inputs = document.querySelectorAll('form div input');
[].forEach.call(inputs, function(input) {
input.addEventListener('invalid', function(e) {
var collaspe = $(this).closest('.panel').find('.panel-heading .collapse-icon').attr('aria-expanded');
console.log(collaspe);
if (!collaspe) {
$(this).closest('.panel').find('img').trigger("click");
} else {
alert("Do Nothing");
}
});
});
});
.container {
width: 75%;
}
.panel-heading {
background-color: #D9DBDE;
padding: 20px;
margin-bottom: 10px;
border-radius: 0;
}
.panel-title {
font-size: 21px;
display: block;
width: 100%;
color: #4F5858;
line-height: 1.3;
font-weight: normal;
}
.collapse-icon {
float: right;
}
.fieldpos {
margin-left: 0px;
width: 60%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form action="/update" id="formwrite">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title va-middle">Account Settings
<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
</h4>
</div>
<div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-default">
<div class="row fieldpos">
<fieldset class="form-group textwide">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" required>
</fieldset>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title va-middle">Other Settings
<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo">
</h4>
</div>
<div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-default">
<div class="row fieldpos">
<fieldset class="form-group textwide">
<label for="group">Test</label>
<input type="text" class="form-control " id="group" placeholder="test" required>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success form-control savechanges">Save Changes</button>
<button class="btn btn-success form-control test">Call Function</button>
</form>
</body>
JSfiddle这里
有什么建议,我错过了什么?
下面的代码能够完成我所需要的,我只需要添加另一个参数并查找in类以确定是否应该运行触发事件。
$(document).on("click", ".savechanges", function() {
$("input[required]").on("invalid", function(event) {
var collaspe = $(this).closest('.collapse').hasClass("in");
console.log(collaspe);
if (!collaspe) {
$(this).closest('.panel').find('img').trigger("click");
} else if (collaspe) {
$("input[required]").off();
} else {
console.log("Do Nothing");
return false;
}
});
});
相关文章:
- 从HTML表单发布blob的表单输入类型是什么
- angularjs 使用什么事件从文本输入中获取值
- 在d3.json中使用d3.csv组合多个csv文件数据输入的最佳方法是什么
- 有没有什么方法可以通过输入字段(type=file)来找出选择了多少个文件
- 在jquery中,从同一对象的属性设置输入字段和标签的正确方法是什么
- 什么是输入元素上的innerHTML
- 命令行上的输入在什么时候解析为 node.js 中的 process.argv
- 什么'是使输入上禁用的属性与Meteor辅助对象反应的最佳方法
- 当输入字段的值发生更改时,会触发什么事件
- 使用 JavaScript 和无线电输入更改 HTML 中的背景颜色有什么错误
- jQuery mobile-保存用户输入的最佳方式是什么
- 我的输入字段听到除回车之外的每个“键下”事件.我有一个日期选择器,不确定发生了什么
- html表单输入字段验证的正确方法是什么
- 使用eval使用字符串输入按名称将函数分配给变量有什么风险
- 是什么使浏览器自动填充电子邮件/密码输入
- 如何从数据库中搜索数据的值,无论我在HTML的文本字段中输入什么
- 使用iOS 8“扫描信用卡”功能时,输入字段上触发了什么JS事件
- 如何在 Javascript 中聚焦不可见的输入文本框?我应该使用什么样式
- 文本输入控件中任何文本更改的正确 javascript 事件是什么
- 引导输入掩码在动态文本框中不起作用?我能做什么