TwitterBootstrapjQueryValidate/index.htm at master · pauldotknopf/TwitterBootstrapjQueryValidate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Twitter Bootstrap Clientside Validation using the jquery.validation.js plugin</title>

    <meta name="keywords" content="Twitter Bootstrap, TBS, jQuery, Validation, Paul Knopf"  />
    <meta name="description" content="Twitter Bootstrap Clientside Validation using the jquery.validation.js plugin" />

    <link href="Css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="Css/bootstrap-theme.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.bootstrap.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $("form").validate();
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>Twitter Bootstrap Clientside Validation <small>using the jquery.validation.js plugin</small></h1>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-4">
                <h2>Demo</h2>
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" placeholder="Enter email" data-val="true" data-val-required="This field is required." />
                        <p class="field-validation-valid" data-valmsg-for="exampleInputEmail1" data-valmsg-replace="true"></p>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" name="exampleInputPassword1" placeholder="Password" data-val="true" data-val-required="This field is required." />
                        <span class="field-validation-valid" data-valmsg-for="exampleInputPassword1" data-valmsg-replace="true"></span>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
            <div class="col-sm-12 col-md-4">
                <h2>Download</h2>
                <p>
                    <a class="btn btn-default btn-lg" target="_blank" href="Scripts/jquery.validate.bootstrap.js">Download</a>
                </p>
                <p>
                    on <a href="https://github.com/theonlylawislove/Noodle" target="_blank">Github</a>
                </p>
            </div>
            <div class="col-sm-12 col-md-4">
                <h2>Requirements</h2>
                <ul>
                    <li>Twitter Bootstrap >= v3.0.0</li>
                    <li>jQuery Validation Plugin >= v1.13.0</li>
                </ul>
            </div>
        </div>
        <div class="row" style="text-align:center;margin-top:20px;">
            <div class="col-sm-12">
                <h2>by <a href="http://www.pknopf.com/about/" target="_blank">Paul Knopf</a></h2>
            </div>
        </div>
    </div>
    <script>
	  	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  		ga('create', 'UA-33707123-1', 'auto');ga('send', 'pageview');
	</script>
</body>
</html>