title: How to display error messages in red font color on form using jQuery?
body: <p>I'm using PHP and smarty. I'm bit new to jQuery. I've written a function in jQuery and calling this function on form submit. Currently I'm showing the error message in alert. But the requirement is it should be displayed above the form and the field having error should get highlighted. The font colour should be red in both cases. For your reference I'm pasting my smarty template code(i.e form code).</p>
  
  <pre><code>&lt;table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" &gt;
    &lt;tr&gt;
      &lt;td align="left" valign="top"&gt;&lt;h3&gt;Contact Lists &gt;&gt; {$bread_crumbs_text}&lt;/h3&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td valign="top"&gt;
        &lt;table width="99%" border="0" cellpadding="0" cellspacing="0" class="manage_box" &gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;div id="contact_list_import"&gt;
                &lt;form name="manage_contact_list_import" id="manage_contact_list_import" action="contact_list_import.php" method="post"&gt;
                  &lt;input type="hidden" name="op" id="op" value="{$op}"&gt;
                  &lt;input type="hidden" name="contact_list_id" id="contact_list_id" value="{$contact_list_id}"&gt; 
                  &lt;input type="hidden" name="form_submitted" id="form_submitted" value="yes"&gt; 
                  &lt;table width="99%" border="0" cellpadding="5" cellspacing="5"&gt;
                    &lt;tr&gt;
                      &lt;td colspan="3" class="errorMsg"&gt;{$error_msg.error_msgs}&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr height="30" id="user_option"&gt;
                      &lt;td width="300"&gt;
                         &lt;input type="checkbox" id="users" name="users_choice" value="users"/&gt;Users 
                      &lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;input type="checkbox" id="upload_from_file" name="users_choice" value="upload_from_file"/&gt;Upload From File
                      &lt;/td&gt;
                      &lt;td&gt;
                      &lt;input type="checkbox" id="copy_paste_from_excel" name="users_choice" value="copy_paste_from_excel"/&gt;Copy paste from excel
                      &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                    &lt;table border="0" width="80%" class="option_users"&gt;
                    &lt;tr height="30"&gt;
                      &lt;td align="left" width="80%" colspan="5"&gt;
                      &lt;h4&gt;Users&lt;/h4&gt;
                      &lt;input type="checkbox" class="user_checkbox" name="user_checkbox" id="all_users" value="all_users"/&gt;all users &amp;nbsp;&amp;nbsp;  
                      &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr height="30"&gt;
                      &lt;td align="left" width="20%"&gt;
                      &lt;input type="checkbox" class="user_checkbox" name="user_checkbox" id="registered_users" value="registered_users"/&gt;Registered users &amp;nbsp;&amp;nbsp;  
                      &lt;/td&gt;
                      &lt;td valign="middle" align="left" width="10%"&gt;&lt;b&gt;From Date &lt;/b&gt; : &lt;/td&gt;
                      &lt;td align="left" &gt;&amp;nbsp;&lt;input type="text" style="width:100px;" class="inputfield" name="registered_users_from_date" id="registered_users_from_date" maxlength="10" width="20%"&gt;&lt;/td&gt;
                      &lt;td valign="middle" align="left" width="10%"&gt;&lt;b&gt;To Date &lt;/b&gt; : &lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;input type="text" style="width:100px;" class="inputfield" name="registered_users_to_date" id="registered_users_to_date" maxlength="10" width="20%"&gt;&lt;/td&gt; 
                    &lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr height="30"&gt;
                      &lt;td align="left" width="20%"&gt;
                      &lt;input type="checkbox" class="user_checkbox" name="user_checkbox" id="logged_in_users" value="logged_in_users"/&gt;Logged-in users &amp;nbsp;&amp;nbsp;  
                      &lt;/td&gt;
                      &lt;td valign="middle" align="left" width="10%"&gt;&lt;b&gt;From Date &lt;/b&gt; : &lt;/td&gt;
                      &lt;td align="left" &gt;&amp;nbsp;&lt;input type="text" style="width:100px;" class="inputfield" name="registered_users_from_date" id="logged_in_users_from_date" maxlength="10"&gt;&lt;/td&gt;
                      &lt;td valign="middle" align="left" width="10%"&gt;&lt;b&gt;To Date &lt;/b&gt; : &lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;input type="text" style="width:100px;" class="inputfield" name="registered_users_to_date" id="logged_in_users_to_date" maxlength="10"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr height="30"&gt;
                      &lt;td align="left" width="20%"&gt;
                      &lt;input type="checkbox" class="user_checkbox" name="user_checkbox" id="not_logged_in_users" value="not_logged_in_users"/&gt;Not logged-in Users &amp;nbsp;&amp;nbsp;  
                      &lt;/td&gt;
                      &lt;td valign="middle" align="left" width="10%"&gt;&lt;b&gt;From Date &lt;/b&gt; : &lt;/td&gt;
                      &lt;td align="left" &gt;&amp;nbsp;&lt;input type="text" style="width:100px;" class="inputfield" name="not_logged_in_users_from_date" id="not_logged_in_users_from_date" maxlength="10"&gt;&lt;/td&gt;
                      &lt;td valign="middle" align="left" width="10%"&gt;&lt;b&gt;To Date &lt;/b&gt; : &lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;input type="text" style="width:100px;" class="inputfield" name="not_logged_in_users_to_date" id="not_logged_in_users_to_date" maxlength="10"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr height="30"&gt;
                      &lt;td width="300" colspan="5"&gt;
                      &lt;input type="checkbox" class="user_checkbox" name="user_checkbox" id="never_logged_in_users" value="never_logged_in_users"/&gt;Never logged-in Users  
                      &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr height="30"&gt;
                      &lt;td width="300" colspan="1"&gt;
                      &lt;input type="checkbox" class="user_checkbox" name="user_checkbox" id="package_purchase" value="package_purchase"/&gt;Package purchase  
                      &lt;/td&gt;
                      &lt;td align="left"  colspan="4"&gt;
                        &lt;select name="test_pack_type_id" id="test_pack_type_id"&gt;
                        &lt;option value=""&gt;All&lt;/option&gt; 
                        {if $all_type}
                         {foreach from=$all_type item="type"}
                        &lt;option value="{$type.package_type_id}"&gt;{$type.package_type_name}&lt;/option&gt;
                         {/foreach}
                        {/if}
                   &lt;/select&gt;
                    &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr height="30"&gt;
                      &lt;td width="300" colspan="5"&gt;
                      &lt;input type="checkbox" class="user_checkbox" name="user_checkbox" id="try_demo_packages" value="try_demo_packages"/&gt;Try demo packages  
                      &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="5"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                  &lt;/table&gt;
                    &lt;tr&gt;
                      &lt;td colspan="5" valign="top" align="center"&gt;
                        &lt;input type="submit" name="submit_value" id="submit_value" value="{$submit_value}" class="submit"&gt;&amp;nbsp;&amp;nbsp;
                        &lt;input type="button" name="back" id="back" value="{$cancel_value}" class="submit" onclick="javascript:window.location.href='{$control_url}modules/contact_list/contact_list.php'"/&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                &lt;/form&gt;                       
              &lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/td&gt;   
    &lt;/tr&gt;             
  &lt;/table&gt;
  {literal}
  &lt;script language="javascript" type="text/javascript"&gt;
  $(function() {
      $( "#registered_users_from_date" ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd/mm/yy'
      });
  });
  
  $(function() {
      $( "#registered_users_to_date" ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd/mm/yy'
      });
  });
  
  $(function() {
      $( "#logged_in_users_from_date" ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd/mm/yy'
      });
  });
  
  $(function() {
      $( "#logged_in_users_to_date" ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd/mm/yy'
      });
  });
  
  $(function() {
      $( "#not_logged_in_users_from_date" ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd/mm/yy'
      });
  });
  
  $(function() {
      $( "#not_logged_in_users_to_date" ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd/mm/yy'
      });
  });
  
  $(function(){
    $(".user_checkbox").click(function(){ 
      if($("#all_users" ).is(":checked")) {
        $("#registered_users").removeAttr("checked");
        $("#logged_in_users").removeAttr("checked");
        $("#not_logged_in_users").removeAttr("checked");
        $("#never_logged_in_users").removeAttr("checked");
        $("#package_purchase").removeAttr("checked");
        $("#try_demo_packages").removeAttr("checked");
      } else if ($("#registered_users" ).is(":checked") || $("#logged_in_users" ).is(":checked") || $("#not_logged_in_users" ).is(":checked") || $("#never_logged_in_users" ).is(":checked") ||
          $("#package_purchase" ).is(":checked") || $("#try_demo_packages" ).is(":checked") )    {
          $("#all_users").removeAttr("checked"); }
      });
  });
  
  $(function(){
    $('.option_users').hide();    
    $("#users").click(function() {
      if($("#users").is(":checked"))
          $('.option_users').show();  
      else
          $('.option_users').hide();
    });
  });
  
  $("#submit_value").click(function(){
      if($('#user_option').find('input[type=checkbox]:checked').length == 0)
      {
        alert('Please select atleast one checkbox');
        return false;
      }
      if($("#users").is(":checked")) { 
        if($('.option_users').find('input[type=checkbox]:checked').length == 0) { 
          //alert(('input[type=checkbox]:checked').length);
          alert('Please select atleast one checkbox for user type');
          return false;
        }
      }
      return true;
  });
  &lt;/script&gt;
  {/literal}
  </code></pre>