title: jQuery Interaction Cues for Error State Style
body: <p>I am trying to use jQuery CSS Framework for styling the required field error. When the form is submitted with no value in the text box, it should prevent the form from submitting and should display the style corresponding to the following. </p>
  
  <p>•   ui-helper-reset</p>
  
  <p>•   ui-helper-clearfix</p>
  
  <p>•   ui-state-error-text</p>
  
  <p>•   ui-icon-alert</p>
  
  <p><strong>What is the best way to do this?</strong></p>
  
  <p>Note: The code is corresponding to ASP.NET (<code>form runat="server"</code>)</p>
  
  <p>The CODE:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/flick/jquery-ui.css"
      rel="stylesheet" type="text/css" /&gt;
  &lt;title&gt;Interaction cues&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;%-- ui-helper-reset, ui-helper-clearfix, ui-state-error-text,  ui-icon-alert--%&gt;
      &lt;form runat="server" &gt;
  
          &lt;div&gt; 
              &lt;a&gt; User Name &lt;/a&gt;
              &lt;input id="Text1" type="text" /&gt;
              &lt;span&gt; * &lt;/span&gt;
              &lt;a&gt;Required field&lt;/a&gt; 
          &lt;/div&gt;
  
      &lt;input id="Button1" type="button" value="button" /&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>