I am using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=".3.6/css/bootstrap.min.css">
<script src=".12.4/jquery.min.js"></script>
<script src=".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>I am using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools. instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools. on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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>-
4
you need to set a
typeattribute (type="button") to the button. By default it works as a submit button for the form. – Jeet Commented Jul 20, 2016 at 12:33
1 Answer
Reset to default 10Add button attribute type="button" If you are not specifying by default it will take as type="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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>