Как изменить класс TextBox на основе ввода

Question

У меня есть TextBox и Button, и я проверяю их с помощью JQuery. Я использую стили CSS для настройки текстового поля.

Мой CSS является:

<style> 
     #TextBox1 { 
      outline:none; 
      transition: all 0.25s ease-in-out; 
      -webkit-transition: all 0.25s ease-in-out; 
      -moz-transition: all 0.25s ease-in-out; 
      border-radius:3px; 
      -webkit-border-radius:3px; 
      -moz-border-radius:3px; 
      border:1px solid rgba(0,0,0, 0.2); 
      text-transform:capitalize; 
     } 
     #TextBox1:focus { 
      box-shadow: 0 0 3px rgba(156, 190, 247, 1); 
      -webkit-box-shadow: 0 0 3px rgba(156, 190, 247, 1); 
      -moz-box-shadow: 0 0 3px rgba(156, 190, 247, 1); 
      border:1px solid rgba(99, 134, 189, 0.8); 
     } 
     .TextBox1Error { 
      box-shadow: 0 0 6px rgba(245, 141, 148, 1); 
      -webkit-box-shadow: 0 0 6px rgba(245, 141, 148, 1); 
      -moz-box-shadow: 0 0 6px rgba(245, 141, 148, 1); 
      border:1px solid rgba(99, 134, 189, 0.8); 
     } 
</style> 

Мой JQuery является:

<input style="background: url(images/find.png) center left no-repeat; padding-left: 20px; padding-top: 2px; padding-bottom: 2px; padding-right: 4px; font-family: Arial, Verdana; color: #EB620E" type="text" id="TextBox1" size="10" /> 
      <input id="Button1" type="button" value="Search" class="locButton" /> 
      <script type = "text/javascript"> 
       var $j = jQuery.noConflict(); 
       $j(document).ready(function() { 
        $j('#TextBox1').watermark('Search...  ', { className: 'wmark' }); 
        //console.dir($j("#Button1")); 
        $j("#Button1").click(function() { 
         var textbox = document.getElementById("TextBox1").value; 
         if (textbox.length > 0) { 
          //alert("Search query is not empty and redirecting..."); 
          window.location.href = "http://www.mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending"; 
         } 
         else { 
          alert("Search query is empty"); 
          document.getElementById("TextBox1").focus(); 
         } 
        }); 
        $j('#TextBox1').keyup(function() { 
         var $th = $j(this); 
         $th.val($th.val().replace(/[^a-zA-Z0-9 ]/g, '')); 
        }); 
        $j('#TextBox1').keypress(function (e) { 
         var textbox = document.getElementById("TextBox1").value; 
         var code = (e.keyCode ? e.keyCode : e.which); 
         if (code == 13) { 
          if (textbox.length > 0) { 
           e.preventDefault(); 
           window.location.href = "http://www.mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending"; 
          } 
          else { 
           e.preventDefault(); 
           alert("Search query is empty"); 
           document.getElementById("TextBox1").focus(); 
          } 
         } 
        }); 
       }); 
    </script> 

Как изменить выше JQuery код, чтобы изменить класс TextBox к TextBox1Error, если значение внутри пусто либо нажатие вводится в текстовое поле, либо нажатие кнопки «Поиск»?

Я попытался добавить $j('TextBox1').addClass('TextBox1Error'); inside where the alert`, а затем остальная часть кода не работает.

Answer 1

var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
    $j("#Button1").click(function() { 
     var textbox = document.getElementById("TextBox1").value; 
     if (textbox.trim().length == 0) 
      $j("#TextBox1").addClass('TextBox1Error'); 
    }); 
}); 

Пример:

http://jsfiddle.net/trevordowdle/fv8d5/

Что касается удара, введите в поле поиска код будет похож, но просто идти в функции Keypress.

Update

var $j = jQuery.noConflict(); 
       $j(document).ready(function() { 
        $j("#Button1").click(function() { 
         var textbox = document.getElementById("TextBox1").value; 
         if (textbox.trim().length == 0){ 
          $j("#TextBox1").addClass('TextBox1Error'); 
          $j("#TextBox1").focus(); 
         } 
         else 
          $j("#TextBox1").removeClass('TextBox1Error'); 
        }); 
        $j("#TextBox1").focus(function() { 
         if(!$j(this).hasClass('.TextBox1Error')) 
          $j(this).addClass('focus');  
        }); 
        $j("#TextBox1").blur(function() { 
         $j(this).removeClass('focus');  
        }); 
       }); 

http://jsfiddle.net/trevordowdle/fv8d5/2/