2017-10-01 16 views
-1

各フィールドを検証するためのブートストラップ検証フォームを作成しようとしていましたが、もしあればフラッシュエラーが発生しました。私は、サーバー上で、このブートストラップコードをホストserver.When上のローカルホストが、ショーのエラーのブラウザで正常に動作し この私のコードですブートストラップコードがサーバで動作していない

<html lang="en"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Boostrap Validator</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css"/> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"> </script> 
</head> 
    <body> 
     <br/> 
     <form id="contactForm" method="post" class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Full name</label> 
     <div class="col-md-6"> 
      <input type="text" class="form-control" name="fullName" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Email</label> 
     <div class="col-md-6"> 
      <input type="text" class="form-control" name="email" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Title</label> 
     <div class="col-md-6"> 
      <input type="text" class="form-control" name="title" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Content</label> 
     <div class="col-md-6"> 
      <textarea class="form-control" name="content" rows="5"></textarea> 
     </div> 
    </div> 
    <!-- #messages is where the messages are placed inside --> 
    <div class="form-group"> 
     <div class="col-md-9 col-md-offset-3"> 
      <div id="messages"></div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-9 col-md-offset-3"> 
      <button type="submit" class="btn btn-default">Validate</button> 
     </div> 
    </div> 
</form> 
    </body> 
    <script> 
    $(document).ready(function() { 
    $('#contactForm').bootstrapValidator({ 
     container: '#messages', 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      fullName: { 
       validators: { 
        notEmpty: { 
         message: 'The full name is required and cannot be empty' 
        } 
       } 
      }, 
      email: { 
       validators: { 
        notEmpty: { 
         message: 'The email address is required and cannot be empty' 
        }, 
        emailAddress: { 
         message: 'The email address is not valid' 
        } 
       } 
      }, 
      title: { 
       validators: { 
        notEmpty: { 
         message: 'The title is required and cannot be empty' 
        }, 
        stringLength: { 
         max: 100, 
         message: 'The title must be less than 100 characters long' 
        } 
       } 
      }, 
      content: { 
       validators: { 
        notEmpty: { 
         message: 'The content is required and cannot be empty' 
        }, 
        stringLength: { 
         max: 500, 
         message: 'The content must be less than 500 characters long' 
        } 
       } 
      } 
     } 
    }); 
}); 
    </script> 
</html> 

すべてが実行されていません。 このようなエラーが発生する理由はわかりません。 ありがとうございます。

+0

正常に動作しているようです? –

答えて

1

この方法では、コンソール上の任意のエラーを

<html lang="en"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Boostrap Validator</title> 


    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css"/> 

</head> 
    <body> 
     <br/> 
     <form id="contactForm" method="post" class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Full name</label> 
     <div class="col-md-6"> 
      <input type="text" class="form-control" name="fullName" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Email</label> 
     <div class="col-md-6"> 
      <input type="text" class="form-control" name="email" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Title</label> 
     <div class="col-md-6"> 
      <input type="text" class="form-control" name="title" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Content</label> 
     <div class="col-md-6"> 
      <textarea class="form-control" name="content" rows="5"></textarea> 
     </div> 
    </div> 
    <!-- #messages is where the messages are placed inside --> 
    <div class="form-group"> 
     <div class="col-md-9 col-md-offset-3"> 
      <div id="messages"></div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-9 col-md-offset-3"> 
      <button type="submit" class="btn btn-default">Validate</button> 
     </div> 
    </div> 
</form> 
    </body> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"> </script> 
    <script> 
    $(document).ready(function() { 
    $('#contactForm').bootstrapValidator({ 
     container: '#messages', 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      fullName: { 
       validators: { 
        notEmpty: { 
         message: 'The full name is required and cannot be empty' 
        } 
       } 
      }, 
      email: { 
       validators: { 
        notEmpty: { 
         message: 'The email address is required and cannot be empty' 
        }, 
        emailAddress: { 
         message: 'The email address is not valid' 
        } 
       } 
      }, 
      title: { 
       validators: { 
        notEmpty: { 
         message: 'The title is required and cannot be empty' 
        }, 
        stringLength: { 
         max: 100, 
         message: 'The title must be less than 100 characters long' 
        } 
       } 
      }, 
      content: { 
       validators: { 
        notEmpty: { 
         message: 'The content is required and cannot be empty' 
        }, 
        stringLength: { 
         max: 500, 
         message: 'The content must be less than 500 characters long' 
        } 
       } 
      } 
     } 
    }); 
}); 
    </script> 
</html> 
+0

このコードは機能しません。 – kishan

関連する問題