2016-07-20 3 views
2

Symfony 2.7ベースのWebApp内でBootstrapを使用しています。ブートストラップコラプス機能は検証からトリガします - 回避するには?

collapse機能は、DOMオブジェクトの表示を切り替えるために使用されます。FormBootstrapcollapse機能を使用する場合今、私は奇妙な問題に出くわしました。この機能を使用して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>

+2

ヨーヨーとなりますデフォルトでを指定されていない場合は、ボタンの属性type="button"を追加します。 'type'属性(' type = "button" ')をボタンに設定する必要があります。デフォルトでは、フォームの送信ボタンとして機能します。 – Jeet

答えて

4

あなたはそれが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>

関連する問題