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

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

わかりました、私がするいくつかのこと：

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

それはチェックされておらず、長い答えです。疑問がある場合は、もう一度投稿してください;)

Answer 6

$("#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;
});