Live Form Validation javascript

by Varun Nath

HTML

<form action="#"  data-transition="none" data-dom-cache="false" >
    
    <label for="first-name">First Name :</label>
    <input type="text" id="#first-name"></input>
    <span class="error"></span>
    <br>
    <label for="email" class="ui-hidden-accessible" >Email :</label>
        <input type="text" id="email" name="email" placeholder="Email" data-clear-btn="true" >
            <span class="error"></span>
            <br>
        <label for="password" class="ui-hidden-accessible" >Password</label>
        
        <input type="password" name="password" placeholder="Password" data-clear-btn="true">
            <span class="error"></span>
            <a href="#forgot-password" class="forgotPassword">Forgot Password?</a>
            
            <br>
                <input type="submit" name="submit" id="submit" value="Login" >
                    <a href="#sign-up" data-role="button" data-theme=false class="signUp" data-icon="">Sign Up</a>
                </form>

JavaScript

var pattern ='';
minChars='Min 3 Characters';
invalidEmail = 'Invalid Email';

message = ' ';

$('input').keyup(function(event){
        var input = $(this);
         console.log(input.val().length);
     
    switch(input.attr('id'))
    {
          
        case '#first-name':
            message = minChars;
            if(input.val().length >=3)
            {
                input.next('span').text(' ');
            }
            else if(input.val().length!==0)
            {
             input.next('span').text(message);
            }
           
           break;
            
        case '#email':
            message = invalidEmail;
            if(input.val().length >=3)
            {
                input.next('span').text(' ');
            }
            else if(input.val().length!==0)
            {
                input.next('span').text(message);
            }
            break;
            
    default:'';
           
    }
   
    
});

$('input').blur(function(){
    
    switch($(this).attr('id')){
            
        case '#first-name':
            pattern = new RegExp(/[a-z]{3,}/i);
            console.log('first-name');
            message = 'Min 3 Characters';

            break;
           
        default:'Booyah';
            
        case '#email':
            pattern = new RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
            console.log('#email');
            message = 'Invalid Email';
            break;
    }
    
    val = $(this).val();
    console.log(val);
    if(pattern.test(val))
    {
        console.log('Remove Message');
        $(this).next('span.error').text(' ');
       
    }
    else
    { 
         $(this).next('span.error').text(message);

    }
       

});