"Bootstrap and Angular Validation by DSergio"
Bootstrap 3.3.0 Snippet by DSergio

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<section id="contact" ng-app="app">
<div class="container-fluid" ng-controller="appController">
<div class="row">
<div class="col-sm-3 col-sm-offset-1">
<h2 class="top-title">Angular Validation</h2>
</div><!--/.col-sm-3 col-sm-offset-1-->
</div><!--/.row-->
<div class="row">
<form id="kontakt-form" class="form-group" name="myForm" method="post" action="sendemail.php">
<div class="col-sm-3 col-sm-offset-1">
<div class="form-group">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-ok" ng-show="myForm.text.$valid"></i>
<i class="glyphicon glyphicon-remove" ng-show="myForm.text.$invalid && !myForm.text.$pristine"></i>
<input placeholder="Name" type="text"
name="text" ng-model="text" class="form-control" ng-model-options="{updateOn:'blur'}"
required data-toggle="tooltip" data-placement="top" title="Name"/>
</div>
<div style="display:none;" class="error-message bg-danger" ng-show="myForm.text.$invalid && !myForm.text.$pristine">
<div class="arrow"></div>
<span ng-show="myForm.text.$invalid">Name is required.</span><br>
</div>
</div><!--/form-group-->
</div><!--/.col-sm-3-->
<div class="col-sm-3">
<div class="form-group">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-ok" ng-show="myForm.email.$valid"></i>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/*Contact form*/
#contact {
margin-top: 250px;
margin-bottom: 250px;
}
#contact .top-title {
color: #CC9900;
text-align: left;
margin-left: 20px;
}
#contact form {
padding: 20px;
padding-bottom: 50px;
font:16px 'yanone_kaffeesatzregular', sans-serif;
}
#contact form label {
color: #CC9900;
font:14px 'Dosis', sans-serif;
}
#contact a {
font-family: 'yanone_kaffeesatzregular', sans-serif;
color: #000;
}
#contact a:hover {
color: #CC9900;
}
#contact .fa-stack {
color: #CC9900;
font-weight: normal!important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: