AngularJS - Custom form validation

We can have some situation to use custom validations to our input fields, we can use following code to implement it.

Here my case is, I want to validate multiple emails field and have to show field error using AngularJS Form Validation.

For multiple email JavaScript validation check here http://rbalajiprasad.blogspot.in/2015/04/javascript-validate-multiple-email.html 

For AngularJS Form validation check here http://www.w3schools.com/angular/angular_validation.asp


HTML Page:

<p>Email:<br>

  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.validEmail">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="button" ng-click="submit()"
  ng-disabled="myForm.email.$dirty && myForm.email.$invalid">
</p>

AngularJS Controller

$scope.Submit = function () {

     //your validation

            var isValidEmail = isValidEmailAddress($scope.email.ToAddress);

            $scope.myForm.email.$setValidity("validEmail", isValidEmail);

            var isValid = $scope.myForm.$valid;

            if (!isValid) { return; }

//your logic goes here

        };

JavaScript - Simple Email without any server code

I have thought of using simple JavaScript Email feature using "mailTo:". But this is not used for bigger body contents or if you planned for much styles.

Use below JavaScript Method to send emails.

You can use more URL encode to format body.

Ref for URL Encode:  http://www.w3schools.com/tags/ref_urlencode.asp
For MailTo Documentation:  http://www.ietf.org/rfc/rfc2368.txt

JavaScript:

function SendEmail() {

   var subject = 'Mail subject goes here..';

   var body = 'Hi,%0D%0A %0D%0A' +

            'Some of your content %0D%0A%0D%0A' +

            'Next line of body goes here.%0D%0A' +

            '%E2%80%A2 Text within Bullet Text here %E2%80%A2 %0D%0A' +

           

            '%0D%0A Thanks &amp; Regards,%0D%0A' +

            'Your signature goes here..';

    window.location = 'mailto:?subject=' + subject + '&body=' + body;

    return false;

};

HTML:

<input type="button" value="Email" onclick="SendEmail();"/>

CSS - How to make two divs in equal height within container without any script

To set two divs to equal height dynamically without any scripts use this code  

<div class="equal-height-container">

            <div class="equal-height-box">

                dynamic content goes here..

            </div>

            <div class ="equal-height-box">

                dynamic content goes here..

            </div>

   </div>

.equal-height-container {

    display: table;

}

.equal-height-box {

    display: table-cell;

    height: auto;

    overflow: hidden;

    float:none;
    vertical-align:top;

}