And*_*ord 2 javascript forms validation twitter-bootstrap
我在基于Symfony 2.7的WebApp中使用Bootstrap.现在,当在以下内容中使用Bootstrap collapse函数时,我遇到了一个奇怪的问题Form:
该collapse函数用于切换DOM对象的可见性.如果使用此函数来切换a中的元素(例如div容器)Form,则会触发表单验证.
当我在我的服务器上运行我的代码(见下文)时,只要使用按钮切换容器,就会弹出"需要此字段"消息.
这似乎不适用于此.下面的Snippet工作得很好.但是,您可以在w3Schools.com上运行Snippet时看到问题.单击此链接可访问其中一个示例.[R E放置示例代码和我的代码段和运行它.
效果与我的服务器相同:单击切换按钮将触发表单验证.
这只蜜蜂怎么样？有什么区别与这里的Snippet(工作正常)和我的服务器或w3Schools.com上的Snippet(不起作用)？
如何避免表单验证？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>添加按钮属性type="button"如果您没有默认指定它将采用astype="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button type="button" class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>