3

UPDATE 2: Я понял, что название входа почему-то отображается как сообщение об ошибке, я использовал ignoreTitle: правда, чтобы убедиться, что он заголовок не отображается как сообщение об ошибке.проверки Сообщение об ошибке не будет скрывать, когда действует

Однако теперь моя новая проблема в том, когда я печатаю действительный адрес электронной почты сообщение об ошибке все еще оленья кожа уходит.

Как я могу исправить сообщение об ошибке проверки, чтобы оно скрывалось, когда поле ввода является допустимым?

Я довольно новичок в проверке jQuery, и я не могу понять эту проблему. Любая помощь по этому вопросу была бы весьма признательна. Благодаря!

ОБНОВЛЕНО FIDDLE 2: http://jsfiddle.net/psbq8vkj/9/

Jquery:

$(".guestlist-form").validate({ 
ignoreTitle: true, 
    errorClass: "error-class", 
    validClass: "valid-class", 
    rules: { 
      emailaddress: { 
       required: true, 
       email: "Please enter your correct email address." 
      } 
    }, 
    errorPlacement: function(error, element) { 
    $(".myerror").html(''); // clears previous error messages 
    error.appendTo(".myerror"); 
    }, 

    messages: {  
    emailaddress: { 
       required: "Please enter your full email address."   
      }  
    } 
}); 

HTML:

<div id="updates" class="container-fluid"> 
    <center> 
     <div class="title"><br /> 
      <span class="signuptitle">Sign up to our daily newsletter.</span><br/> 
     </div> 
     <div class="guestlist">  
      <form class="guestlist-form" action="email.php" method="post"> 
       <input name="emailaddress" type="email" class="guestlistfield" title="Enter your Email Address Here" placeholder="Enter your Email" /> 
       <input class="button" title="Join" type="submit" value="Sign up"> 
      </form> 
     </div> 
     <div class="myerror" style="margin-top:-20px;"></div>      
    </center> 
<br><br> 
</div> 

CSS:

@media (min-width:959px) { 


.error-class { 
    font-size:20px; text-shadow:0.7px 0.7px #000; 
} 


.sociallogo {display:block; display:inline-block;} 

.sociallogosmall {display:none;} 

.feedback { 
font-size:25px; font-weight:bold; margin-top:0px; text-shadow:1px 1px #000; 
} 

} 



@media (max-width:958px) { 

.sociallogo {display:none;} 

.error-class { 
    font-size:17px; text-shadow:0.7px 0.7px #000; 
} 


.sociallogosmall {display:block; display:inline-block;} 


} 



.icongroup {margin-top:40px;} 

.point {vertical-align:middle; } 

@media (max-width:545px) { 

    .point {display: block; margin: 0 auto;} 

    .icongroup {text-align: center;} 

    .error-class { 
    font-size:15px; text-shadow:0.4px 0.4px #000; 
} 

    #error-message {margin-top:-10px;} 



} 




#yourmessage.error-class {margin-top:14px;} 



.error-class { 
    color:red; z-index:1; 
} 

.guestlist-form.error-class { 
    color:red; z-index:1; 
} 

.guestlistfield.error-class { 
    position:relative; display:inline-block; 
} 

.guestlist-form .button { 
    position:relative; z-index:2; 
} 



input.error-class { border:3px solid red;} 

input.error-class:focus { border:3px solid #f90;} 

.valid-class { 
    color:black; 
} 

.emailaddress:focus, textarea:focus { 
    border:3px solid #f90; 
} 

.guestlistfield:focus, textarea:focus { 
    border:3px solid #f90; 
} 

ответ

1

Вы должны добавить функцию success к проверке:

success: function(label,element) { 
    $(".myerror").html(''); 
}, 

JSFiddle

+0

Я никогда не знал, что я должен был добавить функцию успеха в validation.Thank вы так много! – ChosenJuan

0

просто комментарий вариант errorplacement и он будет работать в соответствии с требованиями.

$(".guestlist-form").validate({ 
    ignoreTitle: true, 
    errorClass: "error-class", 
    validClass: "valid-class", 

    rules: { 
     emailaddress: { 
      required: true, 
      email: "Please enter your correct email address." 
     } 
    }, 
    /*errorPlacement: function(error, element) { 
     $(".myerror").html(''); // clears previous error messages 
     error.appendTo(".myerror"); 
    },*/ 



    messages: { 
       emailaddress: { 
       required: "Please enter your full email address."   
       } 

    } 

}); 

Обновлено скрипка - http://jsfiddle.net/psbq8vkj/11/