Input Validation with Styling anywhere in your site

Hello Friend, When we have input fields in our websites then many custom styling we apply or required for form validation. For example if user entered something, if user changed the value of input, is input empty. Many more depend on user actions.

Here I created one small utility which you can add in your site code and all the inputs of your project can be validated using this, without adding any extra code. Below is the code which you need to add in JavaScript.

function inputValidator(inputSelector) {
  var current_val = $(inputSelector).val();
  function onChange() {
    $(this).removeClass("dirty").addClass("pristine");
    this.updated_val = $(this).val();
    if (this.updated_val != current_val) {
      $(this).removeClass("pristine").addClass("dirty");
    }
  }
  function onFocus(){
    $(this).removeClass("untouched").addClass("touched");
  }
  $(inputSelector).on("input change", onChange);
  $(inputSelector).on("focus", onFocus);
  return true;
}

$(document).ready(function() {
  $.each($("input"), function(key, value) {
    new inputValidator(value);
  });
});

When you add above code in your javascript, then all input will have one class "untouched" by default. Class of input will change on user action, and you can apply style on input based on classes.

• By default class is untouched
• When you touch the input, class will change to "touched"
• When you enter something in the input, class will change to "touched dirty"
• When you revert you changes in the input, class will be "touched pristine"

For example, if our inputs are as shown below:

 
  Text: 


  Email: 


  Password: 


  Number: 


  Date: 

CSS code that I have written for inputs:

.name{
  display: inline-block;
  width:80px;
}
input.untouched{
  background-color: #DDF4FC;
}
input.touched{
  background-color: #6AFAFA;
}
input.touched.pristine{
  background-color: #43FF44;
}
input.touched.dirty{
  background-color: #FF4422;
}

Now if user interact with inputs, colors changes as mentioned in css style

Here is the codepen link : http://codepen.io/JitendraPal/pen/MebLoX

Spread operator or Rest parameter or Ellipsis in JavaScript (ES6)

Spread/Rest/Ellipsis operator in JavaScript is very useful in many context. First important use of this operator is to pass indefinite number of argument in function

Operator syntax: ...name

Three dot and then a variable name

 function sum(a,b,...n){
  return a+b+n[0]+n[1];
 }
 sum(1,2,3,4); // output: 10 

This is also called rest parameter. inside function it can be used directly as array.

As we already know that arguments is already available in function to get many parameters as shown below: but actually that is not array

function fun(){
 return arguments[0] + arguments[1];
}

fun(1,2); // 3


function fun2(...n){
 console.log(arguments);
 console.log(n);
}

fun2(1,2,3); // it will print arguments object and array n.

There are other advantages of spread operator. Suppose we have 2 arrays and need to merge both

var a = [1,2,3], b = [4,5,6];
a.push(...b);
console.log(a); // [1,2,3,4,5,6]

AngularJS advanced trick and techniques

These days AngularJS is highly recommended framework for front-end developer. Angular is really awesome framework to work with. Below are few techniques those I feel really cool features and may be these are simple and easy for you but as a fresher in angular I think these features are really good.

1. How to add multiple classes in ng-class?

Everyone knows how to add class using ng-class, its very easy. We can use ng-class to have more than one class as well

 
// single class



// multiple class

 some content

Similarly we can add many classes separated by comma (,)

2. Can we have multiple conditions in ng-hide and ng-show?

Yes, we can have multiple conditions in ng-hide and ng-show.

// ng-show with multiple conditions

Some content

3. How to share methods or data between controllers?

Yes we can share data and methods between controllers using Factory or Service. Angular has service as constructor method which instantiate once on startup and we can use this service/factory in any controller within the module by injecting on controller method.