<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>
<i class="glyphicon glyphicon-remove" ng-show="myForm.email.$invalid && !myForm.email.$pristine || myForm.email.$error.email"></i>
<input placeholder="email@email.com" type="email"
name="email" ng-model="email" class="form-control" ng-model-options="{updateOn:'blur'}"
required data-toggle="tooltip" data-placement="top" title="E-Mail address"/>
</div>
<div style="display:none;" class="error-message bg-danger" ng-show="myForm.email.$invalid && !myForm.email.$pristine || myForm.email.$error.email">
<div class="arrow"></div>
<span ng-show="myForm.email.$invalid">E-Mail is required.</span><br>
<span ng-show="myForm.email.$error.email"> We need a valid e-mail address.</span>
</div>
</div><!--/form-group-->
</div><!--/.col-sm-3-->
<div class="col-sm-4">
<div class="form-group">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-ok" ng-show="myForm.betreff.$valid"></i>
<i class="glyphicon glyphicon-remove" ng-show="myForm.betreff.$invalid && !myForm.betreff.$pristine"></i>
<input placeholder="Thema" type="text"
name="betreff" ng-model="betreff" class="form-control" ng-model-options="{updateOn:'blur'}"
required data-toggle="tooltip" data-placement="top" title="Theme"/>
</div>
<div style="display:none;" class="error-message bg-danger" ng-show="myForm.betreff.$invalid && !myForm.betreff.$pristine">
<div class="arrow"></div>
<span ng-show="myForm.betreff.$invalid">Theme is required.</span><br>
</div>
</div><!--/form-group-->
</div><!--/.col-sm-3-->
<div class="col-sm-10 col-sm-offset-1">
<div class="form-group">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-ok" ng-show="myForm.nachricht.$valid"></i>
<i class="glyphicon glyphicon-remove" ng-show="myForm.nachricht.$invalid && !myForm.nachricht.$pristine"></i>
<textarea placeholder="Message" type="text"
name="nachricht" ng-model="nachricht" class="form-control" ng-model-options="{updateOn:'blur'}"
required pattern=".{2,}" data-toggle="tooltip" data-placement="top" title="Message"></textarea>
</div>
<div style="display:none;" class="error-message bg-danger"
ng-show="myForm.nachricht.$invalid && !myForm.nachricht.$pristine">
<div class="arrow"></div>Message is required!
</div>
</div><!--/form-group-->
<div class="form-group">
<button type="submit" class="btn btn-default submit" ng-disabled="myForm.$invalid" name="submit">Send</button>
</div>
</div><!--/.col-sm-12-->
<div class="col-sm-5 col-sm-offset-1">
<div class="error-message3" ng-show="myForm.$invalid">
<span> Please make sure all required fields are filled out correctly.</span>
</div>
<div class="success-message bg-success" ng-show="myForm.$valid">
<span>Now you can send your message.<i class="glyphicon glyphicon-ok"></i></span>
</div>
</div>
</form>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#article-content-->
<footer id="footer">
<p>Powered By DSergio</p>
</footer>
<script>
var app = angular.module('app', []);
// Controller
app.controller('appController', function($scope){
});
// Validation
app.directive('validFile',function(){
return {
require:'ngModel',
link:function(scope,el,attrs,ngModel){
el.bind('change',function(){
scope.$apply(function(){
ngModel.$setViewValue(el.val());
ngModel.$render();
});
});
}
}
});
</script>
/*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;
}
#contact h1 {
margin-top: 0px;
margin-bottom: 0px;
font:200% 'yanone_kaffeesatzregular', sans-serif;
text-transform: uppercase;
text-align: left;
font-weight: 300;
color: #999;
border-bottom: 1px solid #999;
}
#contact h2 .lead {
color: #000;
}
#contact h2 {
font-family: 'yanone_kaffeesatzregular', sans-serif;
}
#contact p {
font:16px 'yanone_kaffeesatzregular', sans-serif;
color: #000;
}
.web-strong {
font:18px 'yanone_kaffeesatzregular', sans-serif;
}
#contact input,
#contact textarea {
border-radius: 0;
background-color: #eee;
}
#contact .btn-default {
border-radius: 0;
background-color: #CC9900;
padding:10px 35px;
border: 1px solid #CC9900;
color: #fff;
font:16px 'yanone_kaffeesatzregular', sans-serif;
}
#contact .btn-default:hover,
#contact .btn-default:focus{
color: #CC9900;
background-color: #eee;
}
#contact input {
height: 40px!important;
}
#contact .error-message3 {
margin-top: 20px;
padding: 12px;
font-weight: bold;
color: #ffffff;
color: #a94442;
font:16px 'yanone_kaffeesatzregular', sans-serif;
}
#contact input[readonly] {
background-color: white !important;
cursor: text !important;
}
#contact form input.ng-invalid:not(.ng-pristine),
#contact form textarea.ng-invalid:not(.ng-pristine) {
border-color: #a94442;
}
#contact form input.ng-valid,
#contact form textarea.ng-valid {
border: 1px solid #3c763d;
}
#contact .error-message {
margin-top: 20px;
padding: 12px;
font-weight: bold;
color: #ffffff;
border-radius: 3px;
background-color: #a94442;
font:16px 'yanone_kaffeesatzregular', sans-serif;
}
#contact .error-message2 {
margin-top: 20px;
padding: 12px;
font-weight: bold;
color: #ffffff;
border-radius: 3px;
border: 1px solid #ebccd1;
color: #a94442;
background-color: #f2dede;
font:16px 'yanone_kaffeesatzregular', sans-serif;
}
#contact .success-message {
margin-top: 20px;
padding: 12px;
font-weight: bold;
border-radius: 3px;
color: #3c763d;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
font:16px 'yanone_kaffeesatzregular', sans-serif;
}
#contact .arrow {
width: 0;
height: 0;
float: left;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #a94442;
margin-top: -20px;
}
#contact [disabled] {
pointer-events: none;
}
#contact span.message {
position: absolute;
width: 150px;
left: 120%;top: 0%;
padding: 7px;
color: #a94442;
font-family: 'yanone_kaffeesatzregular', sans-serif;
}
#contact span.valid-message {
position: absolute;
width: 150px;
left: 120%;top: 0%;
padding: 7px;
color: #3c763d;
font-family: 'yanone_kaffeesatzregular', sans-serif;
}
#contact .alert-danger {
padding: 5px;
border-radius: 3px;
}
#contact .alert-danger p {
color: #ffffff;
}
#contact .lead i.animated {
color: #65B6A0;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
#contact .lead:hover i.animated {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
/* enable absolute positioning */
#contact .inner-addon {
position: relative;
}
/* style glyph */
#contact .inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
color: #3c763d;
}
/* align glyph */
#contact .left-addon .glyphicon { left: 0px;}
#contact .right-addon .glyphicon { right: 0px;}
/* add padding */
#contact .left-addon input {
padding-left: 30px;
}
#contact .right-addon input {
padding-right: 30px;
font:16px 'yanone_kaffeesatzregular', sans-serif; }
#contact .right-addon textarea {
padding-right: 30px;
font:16px 'yanone_kaffeesatzregular', sans-serif;
}
#contact form textarea {
height: 100px;
}
#contact .inner-addon .glyphicon-ok {
color: #3c763d;
}
#contact .inner-addon .glyphicon-remove {
color: #a94442;
}
#contact .tooltip {
font:14px 'yanone_kaffeesatzregular', sans-serif;
}
#footer p {
font-family: 'helvetica_neueregular', sans-serif;
margin-left: 10px;
color: #999;
}
