Symfony 2.7ベースのWebApp内でBootstrapを使用しています。ブートストラップコラプス機能は検証からトリガします - 回避するには?
collapse
機能は、DOMオブジェクトの表示を切り替えるために使用されます。Form
内Bootstrapcollapse
機能を使用する場合今、私は奇妙な問題に出くわしました。この機能を使用してForm
内の要素(div
コンテナなど)を切り替えると、フォームの検証が開始されます。
サーバー上で自分のコード(下記参照)を実行すると、ボタンを使用してコンテナを切り替えるとすぐに「このフィールドは必須です」というメッセージが表示されます。
ここでは機能しないようです。下のスニペットはうまく動作します。がw3Schools.comでスニペットを実行しているときに、の代わりに問題が発生することがあります。例の1つに行くにはthis linkをクリックしてください。 R サンプルコードを自分のスニペットに置き換えて実行します。
私のサーバーで効果は同じです:トグルボタンをクリックすると、フォームの検証がトリガーされます。
どのようにこの蜂はできますか?スニペット(差し替えOK)とスニペット(スニペット)は、私のサーバーやw3Schools.comとは違います(動作しません)。
フォームの検証を避けるにはどうすればよいですか?
<!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'属性(' type = "button" ')をボタンに設定する必要があります。デフォルトでは、フォームの送信ボタンとして機能します。 – Jeet