php - 如何使用 jQuery 在表单上以红色字体显示错误消息？

Question

我正在使用 PHP 和 smarty。我对 jQuery 有点陌生。我在 jQuery 中编写了一个函数，并在表单提交时调用了这个函数。目前我正在警报中显示错误消息。但要求是它应该显示在表单上方，并且有错误的字段应该突出显示。在这两种情况下，字体颜色都应为红色。为了您的引用，我正在粘贴我的 smarty 模板代码(即表单代码)。

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
  <tr>
    <td align="left" valign="top"><h3>Contact Lists >> {$bread_crumbs_text}</h3></td>
  </tr>
  <tr>
    <td valign="top">
      <table width="99%" border="0" cellpadding="0" cellspacing="0" class="manage_box" >
        <tr>
          <td>
            <div id="contact_list_import">
              <form name="manage_contact_list_import" id="manage_contact_list_import" action="contact_list_import.php" method="post">
                <input type="hidden" name="op" id="op" value="{$op}">
                <input type="hidden" name="contact_list_id" id="contact_list_id" value="{$contact_list_id}"> 
                <input type="hidden" name="form_submitted" id="form_submitted" value="yes"> 
                <table width="99%" border="0" cellpadding="5" cellspacing="5">
                  <tr>
                    <td colspan="3" class="errorMsg">{$error_msg.error_msgs}</td>
                  </tr>
                  <tr height="30" id="user_option">
                    <td width="300">
                       <input type="checkbox" id="users" name="users_choice" value="users"/>Users 
                    </td>
                    <td>&nbsp;<input type="checkbox" id="upload_from_file" name="users_choice" value="upload_from_file"/>Upload From File
                    </td>
                    <td>
                    <input type="checkbox" id="copy_paste_from_excel" name="users_choice" value="copy_paste_from_excel"/>Copy paste from excel
                    </td>
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                  <table border="0" width="80%" class="option_users">
                  <tr height="30">
                    <td align="left" width="80%" colspan="5">
                    <h4>Users</h4>
                    <input type="checkbox" class="user_checkbox" name="user_checkbox" id="all_users" value="all_users"/>all users &nbsp;&nbsp;  
                    </td>
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                  <tr height="30">
                    <td align="left" width="20%">
                    <input type="checkbox" class="user_checkbox" name="user_checkbox" id="registered_users" value="registered_users"/>Registered users &nbsp;&nbsp;  
                    </td>
                    <td valign="middle" align="left" width="10%"><b>From Date </b> : </td>
                    <td align="left" >&nbsp;<input type="text" style="width:100px;" class="inputfield" name="registered_users_from_date" id="registered_users_from_date" maxlength="10" width="20%"></td>
                    <td valign="middle" align="left" width="10%"><b>To Date </b> : </td>
                    <td>&nbsp;<input type="text" style="width:100px;" class="inputfield" name="registered_users_to_date" id="registered_users_to_date" maxlength="10" width="20%"></td> 
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                  <tr height="30">
                    <td align="left" width="20%">
                    <input type="checkbox" class="user_checkbox" name="user_checkbox" id="logged_in_users" value="logged_in_users"/>Logged-in users &nbsp;&nbsp;  
                    </td>
                    <td valign="middle" align="left" width="10%"><b>From Date </b> : </td>
                    <td align="left" >&nbsp;<input type="text" style="width:100px;" class="inputfield" name="registered_users_from_date" id="logged_in_users_from_date" maxlength="10"></td>
                    <td valign="middle" align="left" width="10%"><b>To Date </b> : </td>
                    <td>&nbsp;<input type="text" style="width:100px;" class="inputfield" name="registered_users_to_date" id="logged_in_users_to_date" maxlength="10"></td>
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                  <tr height="30">
                    <td align="left" width="20%">
                    <input type="checkbox" class="user_checkbox" name="user_checkbox" id="not_logged_in_users" value="not_logged_in_users"/>Not logged-in Users &nbsp;&nbsp;  
                    </td>
                    <td valign="middle" align="left" width="10%"><b>From Date </b> : </td>
                    <td align="left" >&nbsp;<input type="text" style="width:100px;" class="inputfield" name="not_logged_in_users_from_date" id="not_logged_in_users_from_date" maxlength="10"></td>
                    <td valign="middle" align="left" width="10%"><b>To Date </b> : </td>
                    <td>&nbsp;<input type="text" style="width:100px;" class="inputfield" name="not_logged_in_users_to_date" id="not_logged_in_users_to_date" maxlength="10"></td>
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                  <tr height="30">
                    <td width="300" colspan="5">
                    <input type="checkbox" class="user_checkbox" name="user_checkbox" id="never_logged_in_users" value="never_logged_in_users"/>Never logged-in Users  
                    </td>
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                  <tr height="30">
                    <td width="300" colspan="1">
                    <input type="checkbox" class="user_checkbox" name="user_checkbox" id="package_purchase" value="package_purchase"/>Package purchase  
                    </td>
                    <td align="left"  colspan="4">
                      <select name="test_pack_type_id" id="test_pack_type_id">
                      <option value="">All</option> 
                      {if $all_type}
                       {foreach from=$all_type item="type"}
                      <option value="{$type.package_type_id}">{$type.package_type_name}</option>
                       {/foreach}
                      {/if}
                 </select>
                  </td>
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                  <tr height="30">
                    <td width="300" colspan="5">
                    <input type="checkbox" class="user_checkbox" name="user_checkbox" id="try_demo_packages" value="try_demo_packages"/>Try demo packages  
                    </td>
                  </tr>
                  <tr><td colspan="5">&nbsp;</td></tr>
                </table>
                  <tr>
                    <td colspan="5" valign="top" align="center">
                      <input type="submit" name="submit_value" id="submit_value" value="{$submit_value}" class="submit">&nbsp;&nbsp;
                      <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'"/>
                    </td>
                  </tr>
                </table>
              </form>                       
            </div>
          </td>
        </tr>
      </table>
    </td>   
  </tr>             
</table>
{literal}
<script language="javascript" type="text/javascript">
$(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;
});
</script>
{/literal}

Answer 1

$("#submit_value").click(function(){
    if($('#user_option').find('input[type=checkbox]:checked').length == 0)
    {
      $('.errorMsg').html('<span style="color:red">Please select atleast one checkbox</span>');
      return false;
    }
    if($("#users").is(":checked")) { 
      if($('.option_users').find('input[type=checkbox]:checked').length == 0) { 
        //alert(('input[type=checkbox]:checked').length);
       $('.errorMsg').text('<span style="color:red">Please select atleast one checkbox for user type</span>');
        return false;
      }
    }
    return true;
});