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

Question

我正在使用PHP和smarty。我对jQuery有点新鲜。我在jQuery中编写了一个函数，并在表单提交上调用此函数。目前我正在警告中显示错误消息。但要求是它应该显示在表单上方，并且应该突出显示有错误的字段。两种情况下字体颜色应为红色。为了您的参考，我正在粘贴我的智能模板代码（即表单代码）。

<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;
});

Answer 2

if (error exist) {
  $errormsg = "<span style='color: red'>sometext</span>";
  $("#id").html($errormsg)
}

或者你也可以 addClass 。

//css
.error {
    color: red;
}

 //javascript
 if (error exist) {

      $("#id").addClass('error').html("sometext")
    }

addClass

Answer 3

在表单顶部添加span标记

<span id="errorMsg"></span>

在Jquery中，而不是警告给出

$('#errorMsg').css('color','red');
$('#errorMsg').html('Please select atleast one checkbox');

Answer 4

$("#submit_value").click(function(){
    if($('#user_option').find('input[type=checkbox]:checked').length == 0)
    {
      $("#user").html('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);
        $("#user").html('Please select atleast one checkbox for user type');
        return false;
      }
    }
    return true;
});

在复选框的顶部或复选框中添加具有不同ID的div

<div id="user" style='color:red'></div>

Answer 5

$("#submit_value").click(function(){
  if($('#user_option').find('input[type=checkbox]:checked').length == 0)
    {
    $('.errorMsg').css({ 'color': 'red'});
    $('.errorMsg').html('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);
        $('.errorMsg').css({ 'color': 'red'});
    $('.errorMsg').html('Please select atleast one checkbox for user type');


        return false;
      }
    }
    return true;
});

Answer 6

好的，我会做的一些事情：

1-不要链接到元素ID，而是将事件链接到表单：

$("#submit_value").click(function() {
$('form.validate').submit(function() {

有了这个，你必须将类'validate'添加到html表单中。通过这种方式，任何提交按钮都会检查表单，即使你使用jquery来触发表单的提交，你也可以重用jquery代码

2-使用类添加样式。 使用类，您可以轻松定义错误元素样式的方式：

input.error {
    background-color:red;
    border: 1px solid red;
}
select.error {
    border: 1px solid red;
}

并且很容易将一个元素附加到一个元素而不是一个样式。

3 - 在html 中为您的邮件创建一个保留空间，并隐藏加载的邮件。您可以轻松地从PHP更改要显示的消息。

<tr>
    <td colspan="3" class="errorMsg">{$error_msg.error_msgs}</td>
</tr>

应包含以下内容：

<tr>
     <td colspan="3" class="errorMsg">
     <p id="errorIDelement">Error with input IDelement</p>
     <p id="errorUserCheck">Please select atleast one checkbox for user type</p>
     </td>
</tr>

您的jquery代码，如下所示：

$("form.validate").submit(function(e){
    $form = $(this);
    e.preventDefault(); 

    //Not selected checkbox:
    $errorChecks = $form.find('input[type=checkbox]:checked');

    if($errorChecks.length != 0) {
      $errorChecks.each( function(){
          // This would highlight error 
          $(this).addClass('error');
          // This would show error in your list
          $id = $(this).attr('id');
          $('#error'+$id ).show();              
      });
    } else if($("#users").is(":checked") && $('.option_users').find('input[type=checkbox]:checked').length == 0) { 
         $('.errorMsg .errorUserCheck').show();
         $("#users").addClass('error');
      } else {
      // If we arrived here, we have validated all, and can submit
      $form.submit(); 
    }
});

没有检查，如果您有任何疑问，请回答很长的问题，然后再回复，以确定答案;）