Home Explore Help
Sign In
githab
/
bootstrapvalidator
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add more examples

nghuuphuoc 11 years ago
parent
e7b3f3de7a
commit
cd2e9f0c85
2 changed files with 234 additions and 0 deletions
Unified View Show Diff Stats
  1. 83 0
      demo/dynamic.html
  2. 151 0
      demo/multiple.html

+ 83 - 0
demo/dynamic.html
View File 

@@ -0,0 +1,83 @@
 
+<!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>

+ 151 - 0
demo/multiple.html
View File 

@@ -0,0 +1,151 @@
 
+<!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>Multiple elements with the same name</h2>
 
+                </div>
 
+
 
+                <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
 
+                    <div class="form-group">
 
+                        <label class="col-lg-3 control-label">Gender</label>
 
+                        <div class="col-lg-5">
 
+                            <div class="radio">
 
+                                <label>
 
+                                    <input type="radio" name="gender" value="male" /> Male
 
+                                </label>
 
+                            </div>
 
+                            <div class="radio">
 
+                                <label>
 
+                                    <input type="radio" name="gender" value="female" /> Female
 
+                                </label>
 
+                            </div>
 
+                            <div class="radio">
 
+                                <label>
 
+                                    <input type="radio" name="gender" value="other" /> Other
 
+                                </label>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="form-group">
 
+                        <label class="col-lg-3 control-label">Browser</label>
 
+                        <div class="col-lg-5">
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="browsers[]" value="chrome" /> Google Chrome
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="browsers[]" value="firefox" /> Firefox
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="browsers[]" value="ie" /> IE
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="browsers[]" value="safari" /> Safari
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="browsers[]" value="opera" /> Opera
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="browsers[]" value="other" /> Other
 
+                                </label>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="form-group">
 
+                        <label class="col-lg-3 control-label">Editors</label>
 
+                        <div class="col-lg-5">
 
+                            <input class="form-control" type="text" name="editors[]" />
 
+                        </div>
 
+                    </div>
 
+                    <div class="form-group">
 
+                        <div class="col-lg-offset-3 col-lg-5">
 
+                            <input class="form-control" type="text" name="editors[]" />
 
+                        </div>
 
+                    </div>
 
+                    <div class="form-group">
 
+                        <div class="col-lg-offset-3 col-lg-5">
 
+                            <input class="form-control" type="text" name="editors[]" />
 
+                        </div>
 
+                    </div>
 
+                    <div class="form-group">
 
+                        <div class="col-lg-offset-3 col-lg-5">
 
+                            <input class="form-control" type="text" name="editors[]" />
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="form-group">
 
+                        <div class="col-lg-offset-3 col-lg-3">
 
+                            <button type="submit" class="btn btn-primary">Submit</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: {
 
+                gender: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The gender is required'
 
+                        }
 
+                    }
 
+                },
 
+                'browsers[]': {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'Please specify at least one browser you use daily for development'
 
+                        }
 
+                    }
 
+                },
 
+                'editors[]': {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The editor names are required'
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        });
 
+    });
 
+</script>
 
+</body>
 
+</html>