|
|
@@ -1,83 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
- <title>BootstrapValidator demo</title>
|
|
|
-
|
|
|
- <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
|
|
|
- <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
|
|
|
-
|
|
|
- <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
|
|
|
- <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
|
|
|
- <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<div class="container">
|
|
|
- <div class="row">
|
|
|
- <!-- form: -->
|
|
|
- <section>
|
|
|
- <div class="col-lg-8 col-lg-offset-2">
|
|
|
- <div class="page-header">
|
|
|
- <h2>Support dynamic elements</h2>
|
|
|
- </div>
|
|
|
-
|
|
|
- <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
|
|
|
- <p>What programming languages are you good at?</p>
|
|
|
-
|
|
|
- <div class="form-group hide" id="template">
|
|
|
- <div class="col-lg-4"><input class="form-control" type="text" /></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <div class="col-lg-4"><input class="form-control" type="text" name="languages[]" /></div>
|
|
|
- <div class="col-lg-4"><button type="button" class="btn btn-success" id="addButton">Add more</button></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <div class="col-lg-4"><input class="form-control" type="text" name="languages[]" /></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <div class="col-lg-3">
|
|
|
- <button type="submit" class="btn btn-primary">Hire me</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <!-- :form -->
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-
|
|
|
-<script type="text/javascript">
|
|
|
- $(document).ready(function() {
|
|
|
- $('#defaultForm').bootstrapValidator({
|
|
|
- message: 'This value is not valid',
|
|
|
- feedbackIcons: {
|
|
|
- valid: 'glyphicon glyphicon-ok',
|
|
|
- invalid: 'glyphicon glyphicon-remove',
|
|
|
- validating: 'glyphicon glyphicon-refresh'
|
|
|
- },
|
|
|
- fields: {
|
|
|
- 'languages[]': {
|
|
|
- validators: {
|
|
|
- notEmpty: {
|
|
|
- message: 'The language name is required'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- $('#addButton').on('click', function() {
|
|
|
- var formGroup = $(this).parents('.form-group');
|
|
|
- $('#template')
|
|
|
- .clone()
|
|
|
- .removeAttr('id')
|
|
|
- .removeClass('hide')
|
|
|
- .find('input').attr('name', 'language[]').end()
|
|
|
- .insertAfter(formGroup);
|
|
|
- });
|
|
|
- });
|
|
|
-</script>
|
|
|
-</body>
|
|
|
-</html>
|