Condition not working correctly not changing color with respect to condition in jQuery

问题内容:

I want to create function for my form that if any field is empty background color getting red otherwise background green but my condition not working correctly after running function all field have same background color not fulfill the condition correctly red here is my code all field show red background color kindly help

$(document).ready(function(){
   $(".validate").each(function(i){
      var text = ($(this).val());
      alert(text);

      if(text === ''){
       $(".validate").css("backgroundColor","red");
       alert("Enter Value Here")
      }
      else
      {
       $(".validate").css("backgroundColor","green");
      }

HTML Code

 <table id="tblForm" style="width:55%;margin-left:20%;margin-top:2%;border:1px solid">
   <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
   <td style="width:20%;border:1px solid;font-size:12px;font-weight:bold;"  >
      <asp:Label  runat="server" ID="lbl_TransactionId_St_M"  Text="Transaction Type:"></asp:Label>

   </td>
   <td style="margin-left:1%;border:1px solid;width:30%;font-size:12px;font-weight:bold;">
       <asp:DropDownList ID="cmbTransType" runat="server" style="width:100%;" CssClass="validate">
       <asp:ListItem Text="Select"></asp:ListItem>
       </asp:DropDownList>
   </td>
   <td style="margin-left:1%;border:1px solid;width:20%;font-size:12px;font-weight:bold;">
     <asp:Label runat="server" ID="lbl_OrderDate_DateTime_M"  Text="Order Date:"></asp:Label>
   </td>
   <td style="margin-left:1%;border:1px solid;width:30%;font-size:12px;font-weight:bold;">
       <asp:TextBox ID="txtOrderDate" runat="server" style="width:98%" CssClass="validate"></asp:TextBox>
   </td>
   </tr>
   <tr>
   <td style="width:20%;border:1px solid;font-size:12px;font-weight:bold;">
      <asp:Label runat="server" ID="lblDocumentType_St_O" CssClass="label" Text="Document Type:"></asp:Label>
   </td>
   <td style="margin-left:1%;border:1px solid;width:30%;font-size:12px;font-weight:bold;">
       <asp:DropDownList ID="cmbDocType" runat="server" style="width:100%;" CssClass="validate">
       <asp:ListItem Text="Select"></asp:ListItem>
       </asp:DropDownList>
   </td>
   <td style="margin-left:1%;border:1px solid;width:20%;font-size:12px;font-weight:bold;">
     <asp:Label runat="server" ID="lblPartyPO_Num_M"  Text="Party PO #:"></asp:Label>
   </td>
   <td style="margin-left:1%;border:1px solid;width:30%;font-size:12px;font-weight:bold;">
       <asp:TextBox ID="txtPONo" runat="server" style="width:98%" CssClass="validate"></asp:TextBox>
   </td>
   </tr>

问题评论:

2  
backgroundColoe => backgroundColor
1  
can you add your HTML code to your question?

答案:

答案1:

You need to use this i.e. current element context when setting background color.

$(".validate").each(function (i) {
    var text = $(this).val();
    if (text === '') {
        $(this).css("backgroundColor", "red");
        alert("Enter Value Here")
    } else {
        $(this).css("backgroundColor", "green");
    }
});

答案评论:

    
Awesome it’s working fine ,is this possible that i apply validation rule on it
– Raheel
7 hours ago

答案2:

You have typo in your code. Use this:

$(document).ready(function(){
   $(".validate").each(function(i){
      var text = ($(this).val());
      alert(text);

      if(text === ''){
       $(".validate").css("backgroundColor","red");
       alert("Enter Value Here")
      }
      else
      {
       $(".validate").css("backgroundColor","green");
      }

答案评论:

    
I did spelling mistake here not in my code dear ,not working as per my requirement
– Raheel
7 hours ago

原文地址:

https://stackoverflow.com/questions/47748837/condition-not-working-correctly-not-changing-color-with-respect-to-condition-in

添加评论