jQuery( document ).ready( function() {
 
    // focus 
    $( 'input#newsletterText' ).focus(function() {
        $(this).attr('value', '');
        $(this).css({'color': '#52565B', 'fontSize': '15px' });
    });
    
    // prevents user from just pressing enter to submit form
    // purpose: the color red will continue to show if the user types after field shows "NOT VALID EMAIL"
    // this way forces the user to click on the submit button
   
    $("input#newsletterText").keypress(function (e) {
        var k = e.keyCode || e.which;
        if (k == 13) {
            e.preventDefault();
            e.stopPropagation();
        }
    });
   
   
   
   // validation
    $( 'form#newsLetter' ).submit(function(e) {        
       var eInputText = $( 'input:text', $(this) );     // get element input::type=text
       var value = eInputText.val();                    // .val() empty string evaluates to false
       
       if ( value && ( value != "NOT VALID EMAIL" ) ) 
       {          
           if ( !(/^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test(value)) )
           {
                eInputText.css({'color': 'red', 'fontSize': '15px' });
                eInputText.attr('value', "NOT VALID EMAIL");
                e.preventDefault();
                e.stopPropagation();
           } 
           else 
           {
               alert("Thank you for subscribing to the Sacramento Children's Home Newsletter.");
               return true;
           }         
       }
       else 
       {
            eInputText.css({'color': 'red', 'fontSize': '15px' });
            eInputText.attr('value', "NOT VALID EMAIL");
            e.preventDefault();
            e.stopPropagation();
                
       }
       
       // e.preventDefault();                 //  prevent default behavor of element.  And don't use return false because it is both preventDefault() and stopPropagation();
    });
    

});