Bootstrap折叠功能从验证触发-如何避免

Bootstrap collapse function triggers from validation - How to avoid?

本文关键字：何避免 验证 折叠 功能 Bootstrap      更新时间：2023-09-26

我在基于Symfony 2.7的WebApp中使用Bootstrap。现在，在Form:中使用Bootstrap collapse函数时，我遇到了一个奇怪的问题

collapse函数用于切换DOM对象的可见性。如果使用此函数切换Form中的元素（例如div容器），则会触发表单验证。

当我在服务器上运行我的代码（见下文）时，只要使用按钮切换容器，就会弹出一条"This field is required"消息。

这在这里似乎不起作用。下面的Snippet工作得很好但是，当在w3Schools.com上运行Snippet时，您会发现问题。单击此链接可访问其中一个示例。R用我的Snippet替换示例代码并运行它。

在我的服务器上效果是一样的：点击切换按钮将触发表单验证。

这只蜜蜂怎么会？这里的Snippet（工作正常）和我的服务器或w3Schools.com上的Snippe（不工作）有什么区别？

如何避免表单验证

<!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"如果默认情况下未指定，则它将作为type="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>

相关文章：