JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class='container'>
<form role="form">
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="text" class="form-control" id="email" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
<div>

JavaScript

var validateEmail = {
    patterns:{
        "firstByte" :/^\./
    },
    init:function(value){
        this.value = value;
    },
    firstByte:function(){
        var isItDot = this.patterns.firstByte.test(this.value);
        console.log(isItDot);
    },
    done:function(){
        if(this.firstByte()){
            console.log('first Byte is OK!');
        }
    }
}

$('#email').on('input change',function(){
    this.value = $.trim(this.value);
    validateEmail.init(this.value);
    if(validateEmail.done()){
        console.log('this is correct');
    }
});