Question

HTML代码

<div class="input-box validation-error" id="error-validation-icon">
     <input type="text" name="confirm_email" id="confirm_email" 
            title="Confirm email address" class="input-text required-entry validate-cemail validation-failed" 
           value="" onpaste="return false;" 
           style="background: #FFF !important;">
     <div class="validation-advice" id="advice-validate-cemail-confirm_email" style="">
       <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Error message</font></font>
     </div>
</div>

在其他情况下，jquery hide无法正常工作。

代码

      jQuery('#confirm_email').change(function(){
      jQuery('#email_error').hide();
       jQuery('#advice-validate-cemail-confirm_email').hide();
var emailVal = jQuery("#email").val().toLowerCase();;
var cemailVal=jQuery('#confirm_email').val().toLowerCase();;
if(cemailVal != emailVal){
alert("Not OK");
jQuery("#confirm_email").attr('style', 'background: #fff7f5 !important;');
}else{
alert("OK");
jQuery("#confirm_email").attr('style', 'background: #FFF !important;');
jQuery('#advice-validate-cemail-confirm_email').hide();
    }
   });

其他条件正确，但隐藏或显示不起作用

Answer 1

对我有用，我添加了一封电子邮件进行测试

jQuery 3.3v

https://jsfiddle.net/usgryx1j/2/

     <div class="input-box validation-error" id="error-validation-icon">
<input type="text" id="email" placeholder="email"/>
     <input type="text" name="confirm_email" id="confirm_email" placeholder="Confirm email address"
            title="Confirm email address" class="input-text required-entry validate-cemail validation-failed" 
             value="" onpaste="return false;" 
           style="background: #FFF !important;">
     <div class="validation-advice" id="advice-validate-cemail-confirm_email" style="">
       <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Error message</font></font>
     </div>
</div>

jquery端

   $(document).ready(function(){
   var emailVal,cemailVal;
  //Befor change you must hide that 
  $('#advice-validate-cemail-confirm_email').hide();

  $('#confirm_email').change(function(){

      emailVal = $("#email").val().toLowerCase()
      cemailVal=$('#confirm_email').val().toLowerCase()
    if(cemailVal != emailVal){
            alert("Not OK");
      $('#advice-validate-cemail-confirm_email').show();
            $("#confirm_email").attr('style', 'background: #fff7f5 !important;');
    }else{
    alert("OK");
    $("#confirm_email").attr('style', 'background: #FFF !important;');
  }
  });
});

jQuert 1.6版

    <script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>

https://jsfiddle.net/up2cwbvo/4/

    <script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
<div class="input-box validation-error" id="error-validation-icon">
<input type="text" id="email" placeholder="email"/>
     <input type="text" name="confirm_email" id="confirm_email" placeholder="Confirm email address"
            title="Confirm email address" class="input-text required-entry validate-cemail validation-failed" 
             value="" onpaste="return false;" 
           style="background: #FFF !important;">
     <div class="validation-advice" id="advice-validate-cemail-confirm_email" style="">
       <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Error message</font></font>
     </div>
</div>
<script>


   jQuery(document).ready(function(){
   var emailVal,cemailVal;
  //Befor change you must hide that 
  jQuery('#advice-validate-cemail-confirm_email').hide();

  jQuery('#confirm_email').change(function(){
      emailVal = jQuery("#email").val().toLowerCase()
      cemailVal=jQuery('#confirm_email').val().toLowerCase()
    if(cemailVal != emailVal){
            alert("Not OK");
      jQuery('#advice-validate-cemail-confirm_email').show();
            jQuery("#confirm_email").attr('style', 'background: #fff7f5 !important;');
    } else{
    alert("OK");
    jQuery("#confirm_email").attr('style', 'background: #FFF !important;');
  }
  });
});

</script>

隐藏或显示在其他情况下不起作用

1 个答案: