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

added regular.html regular form demo

David Crush 11 years ago
parent
dd6187a1b1
commit
7ed6d6f075
2 changed files with 215 additions and 3 deletions
Split View Show Diff Stats
  1. 212 0
      demo/basic.html
  2. 3 3
      demo/date2.html

+ 212 - 0
demo/basic.html
View File 

@@ -0,0 +1,212 @@
 
+<!-- Gives example of basic form -->
 
+
 
+<!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>
 
+
 
+    <!-- Support datetime picker plugin: http://eonasdan.github.io/bootstrap-datetimepicker/ -->
 
+    <link rel="stylesheet" href="//eonasdan.github.io/bootstrap-datetimepicker/content/bootstrap-datetimepicker.css"/>
 
+    <script type="text/javascript" src="//eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
 
+    <script type="text/javascript" src="//eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
 
+
 
+    <style type="text/css">
 
+    /* Override to make the feedback icons shown properly */
 
+    .form .bv-input-group-icon {
 
+        top: 25px;
 
+        right: 35px;
 
+    }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+<div class="container-fluid">
 
+    <div class="row">
 
+        <div class="col-lg-8 col-lg-offset-2">
 
+            <form id="basicExample" action="target.php" method="post">
 
+                <div class="row">
 
+                    <div class="col-lg-1">
 
+                        <div class="form-group">
 
+                            <label for="prefix">Prefix:</label>
 
+                            <input type="text" name="prefix" class="form-control">
 
+                        </div>
 
+                    </div>
 
+                    <div class="col-lg-10">
 
+                        <div class="col-lg-4">
 
+                            <div class="form-group">
 
+                                <label for="firstname">First Name:</label>
 
+                                <input type="text" name="firstname" class="form-control">
 
+                            </div>
 
+                        </div>
 
+                        <div class="col-lg-4">
 
+                            <div class="form-group">
 
+                                <label for="middlename">Middle Name:</label>
 
+                                <input type="text" name="firstname" class="form-control">
 
+                            </div>
 
+                        </div>
 
+                        <div class="col-lg-4">
 
+                            <div class="form-group">
 
+                                <label for="lastname">Last Name:</label>
 
+                                <input type="text" name="lastname" class="form-control">
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="col-lg-1">
 
+                        <div class="form-group">
 
+                            <label for="suffix">Suffix:</label>
 
+                            <input type="text" name="suffix" class="form-control">
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="row">
 
+                    <div class="col-lg-6">
 
+                        <div class="form-group">
 
+                            <label for="email">Email:</label>
 
+                            <input type="email" name="email" class="form-control">
 
+                        </div>
 
+                    </div>
 
+                    <div class="col-lg-6">
 
+                        <div class="form-group">
 
+                            <label for="phonenumber">Phone Number:</label>
 
+                            <input type="text" name="phonenumber" class="form-control">
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+
 
+                <div class="row">
 
+                    <div class="col-lg-12">
 
+                        <div class="form-group">
 
+                            <label for="languages">What Programming languages do you use?</label>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="languages[]" value="php"> PHP
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="languages[]" value="asp"> ASP.NET MVC
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="languages[]" value="coldfusion"> ColdFusion
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="languages[]" value="javascript"> JavaScript
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="languages[]" value="ruby"> Ruby
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="languages[]" value="python"> Python
 
+                                </label>
 
+                            </div>
 
+                            <div class="checkbox">
 
+                                <label>
 
+                                    <input type="checkbox" name="languages[]" value="java"> Java
 
+                                </label>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+
 
+
 
+                <div class="row">
 
+                    <div class="col-lg-12">
 
+                        <input type="submit" class="btn btn-primary btn-lg pull-right">
 
+                    </div>
 
+                </div>
 
+            </form>
 
+        </div>
 
+    </div>
 
+</div>
 
+
 
+<script>
 
+    $(function() {
 
+        $('#basicExample').bootstrapValidator({
 
+            message: 'This value is not valid',
 
+            feedbackIcons: {
 
+                valid: 'glyphicon glyphicon-ok',
 
+                invalid: 'glyphicon glyphicon-remove',
 
+                validating: 'glyphicon glyphicon-refresh'
 
+            },
 
+            fields: {
 
+                prefix: {
 
+                    validators: {
 
+                        // not required
 
+                    }
 
+                },
 
+                firstname: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'First Name is required.'
 
+                        }
 
+                    }
 
+                },
 
+                middlename: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'Middle Name is required.'
 
+                        }
 
+                    }
 
+                },
 
+                lastname: {
 
+                    validators: {
 
+                       notEmpty: {
 
+                            message: 'Last Name is required.'
 
+                        }
 
+                    }
 
+                },
 
+                suffix: {
 
+                    validators: {
 
+                        // not required
 
+                    }
 
+                },
 
+                email: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'Email is required.'
 
+                        },
 
+                        emailAddress: {
 
+                            message: 'The value is not a valid email address.'
 
+                        }
 
+                    }
 
+                },
 
+                phonenumber: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'Phone number is required.'
 
+                        },
 
+                        phone: {
 
+                            country: 'US',
 
+                            message: 'The value is not a valid US phone number.'
 
+                        }
 
+                    }
 
+                },
 
+                'languages[]': {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'You must pick at least one.'
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        });
 
+    });
 
+</script>
 
+
 
+</body>
 
+</html>

+ 3 - 3
demo/date2.html
View File 

@@ -17,9 +17,9 @@
 
 
     <style type="text/css">
 
     /* Override to make the feedback icons shown properly */
 
-    .form .bv-input-group-icon {
 
+    .bv-form .bv-input-group-icon {
 
         top: 25px;
 
-        right: 35px;
 
+        right: 40px;
 
     }
 
     </style>
 
 </head>
 
@@ -33,7 +33,7 @@
 
                         <h2>Date validator</h2>
 
                     </div>
 
 
-                    <form id="defaultForm" method="post" class="form" action="target.php">
 
+                    <form id="defaultForm" method="post" action="target.php">
 
                         <div class="row">
 
                             <div class="col-lg-4">
 
                                 <div class="form-group">