Question

以下是示例代码。每当我验证时，我都不想突出显示红色的选择字段。但只是想在Red中选择字段旁边显示错误。

单击提交后

HTML

<select name="event" class="control-label error">
<option value="">Select</option>
<option value="1">Sample 1</option>
</select>
<label for="event" generated="true" class="error" style="display: inline-block;"><span style="padding:6px; "> Please select something </span></label>

UI

jQuery验证

$("form").validate({        
        onkeyup:false,
        async: false,
        rules: {            
            event: {
                required: true
            }           
        },        
        messages: {            
            event: {
                required: "<span style='padding:6px; '> Please select Something </span>"
            }
        }
    });

Answer 1

如果您正在使用jquery验证库.. Doc说只需在您不想要边框样式的元素上添加有效的类。

希望这会有所帮助..

Answer 2

Actually required is Html 5 that should show the error in red color only
while in validation use id to call or validate then use that id in style with your need color
ex
#errorBox1,
#errorBox2,
#errorBox3,
#errorBox4,
#errorBox5,
#errorBox6,
#errorBox7,
#errorBox8,
#errorBox9,
#errorBox10
{
color:blue;
}

This is my external stylesheet 
function validate()
 {
  var status = true;
  var a = document.form.Name.value;
  var b = document.form.Password.value;
  var c  = document.form.Cpassword.value;
  var d  = document.form.Address.value;
  var e  = document.form.Email.value;
  var f  = document.form.Mobile.value;


  if( a == "" )
   {
      document.getElementById("errorBox1").innerHTML = "*Please fill required";
      status = false;
    }
    else 
    {
     document.getElementById("errorBox1").innerHTML = "";
      }

  if( b == "" )
   {
      document.getElementById("errorBox2").innerHTML = "*Please fill required";
      status = false;
   }
   else 
    {
     document.getElementById("errorBox2").innerHTML = "";
      }


if( c == "" )
   {
       document.getElementById("errorBox3").innerHTML = "*Please fill required";
       status = false;

   }
   else 
    {
     document.getElementById("errorBox3").innerHTML = "";
      }

 if (b!=c)
       {
       document.getElementById("errorBox10").innerHTML = "*Password does not match";
       status = false;
       }    
else 
    {
     document.getElementById("errorBox10").innerHTML = "";
      }



   if( d == "" )
   {
       document.getElementById("errorBox4").innerHTML = "*Please fill required";
      status = false; 
   }

   else 
    {
     document.getElementById("errorBox4").innerHTML = "";
      }

    if(e == "" || e.indexOf("@", 0) < 0 || e.indexOf(".", 0) < 0 )
   {
       document.getElementById("errorBox5").innerHTML = "*Please fill your valid email id ";
     status = false;  
   }
   else 
    {
     document.getElementById("errorBox5").innerHTML = "";
      }


 if(f == "" || f.length !=10 || f.charAt(0)!="9" ) 
   {
       document.getElementById("errorBox6").innerHTML = "*Mobile no must be 10 digits";
     status = false; 
   }
    else 
    {
     document.getElementById("errorBox6").innerHTML = "";
      }


 if ((document.form.radio1[0].checked == false) && (document.form.radio1[1].checked == false))
     {
        document.getElementById("errorBox7").innerHTML = "*Select your Gender";
        status = false;
        }
        else 
       {
        document.getElementById("errorBox7").innerHTML = "";
      }


    if ((document.form.chk[0].checked == false) && (document.form.chk[1].checked == false)) 
     {
        document.getElementById("errorBox8").innerHTML = "*Please fill the checkbox";
        status = false;
        }

        else 
       {
        document.getElementById("errorBox8").innerHTML = "";
      }

    if (document.form.comment.value == "")
     {
        document.getElementById("errorBox9").innerHTML = "*Please share your feedback";
         status = false;
        }   
    else 
       {
        document.getElementById("errorBox9").innerHTML = "";
          } 

    return status;
}
</script>
</head>


<body>



<div class="rm">
    <form name="form"  method="post"  onsubmit ="return validate();" action=" ">

     Name :   <input type="text" name="Name" onkeyup="validate();" /><div id="errorBox1"></div>
       <br> 
      Password : <input type="password" name="Password" onkeyup="validate();"  /><div id = "errorBox2"></div>
       <br> 

      Confirm Password : <input type="password" name="Cpassword" onkeyup="validate();" /><div id = "errorBox3"></div> <div id = "errorBox10"></div>
      <br> 


      Address : <input type="text" name="Address" onkeyup="validate();"  /><div id = "errorBox4"></div>

      <br>

      Email : <input type="text" name="Email" onkeyup="validate();"  /><div id = "errorBox5"></div>

      <br>

     Mobile No :<input type="text" name="Mobile" onkeyup="validate();"  /><div id = "errorBox6"></div>

      <br>

    Gender : Male<input name="radio1" type="radio"    value="Male"  onclick="validate();"/>
             Female<input name="radio1" type="radio"   value="Female"  onclick="validate();"/><div id = "errorBox7"></div>

      <br>

    Computer Courses: <input type="checkbox" name="chk" onclick="validate();" value="Php"/> Php
                      <input type="checkbox" name="chk" onclick="validate();"  value="ccna"/> Ccna <div id = "errorBox8"></div>

       <br>
     CommentBox : <textarea cols = "25" name= "comment" onkeyup="validate();" /></textarea><div id = "errorBox9"></div>

     <br>


      <div class="submit">
     <input type="submit"  name="submit"  value="Submit" > 
      <input type="reset"   value="Reset"></submit>

Answer 3

感谢大家的回复。我在验证部分做了以下几点。我刚刚添加了一个亮点，它有效。我真的不知道它是如何运作的。但感谢Sathvik Cheela提出了关于突出显示和不突出显示的想法。

$("form").validate({        
        onkeyup:false,
        async: false,
        rules: {            
            event: {
                required: true
            }           
        },        
        messages: {            
            event: {
                required: "<span style='padding:6px; '> Please select Something </span>"
            }
        },
         highlight: function(element, errorClass) {

       }
    });

用户界面（现在）

如何在验证时从选择字段中删除类错误

3 个答案: