Где ошибка, почему div не показывает, что я хочу сделать, это проверить, что числовое значение не пустое, а значение меньше, чем 13
JS
(function($) {
if($('#month-holder').length){
$('#month-holder').on("blur", function(e){
e.preventDefault();
var month = $("#month-holder").val();
if (typeof month != "undefined"){
if(!$.isNumeric(month)){
if (parseInt(month) > 13) {
$('#month-error').fadeIn('slow');
$('#month-holder').addClass("invalid");
}
}
}
else
{
$('#month-error').fadeOut('slow');
$('#month-holder').removeClass("invalid");
}
});
}
})(jQuery);
CSS
input.invalid {
border: 1px solid red;
-moz-box-shadow: 0 0 2px 1px #e4e4e4;
-webkit-box-shadow: 0 0 2px 1px #e4e4e4;
box-shadow: 0 0 2px 1px #e4e4e4;
}
#month-error{
display: none;
}
.error{ color: #f00; padding: 5px 0 0}
HTML
<input type="text" name="month-holder" id="month-holder" class="input-txt width-65" placeholder="MM" maxlength="2" pattern="\d*" x-autocompletetype="month-holder" required autocomplete="off">
<div id="month-error" class="error clearfix">Error</div>
Кто-нибудь может мне помочь
измените свой conditon
if(!$.isNumeric(month)){
в
if($.isNumeric(month)){
ваша текущая реализация не будет работать, если вы сначала введете неверные данные, а затем удалите ее и повторно введите действительные данные, она не удалит сообщения об ошибках.
просто вы можете сделать это вот так:
(function($) {
if($('#month-holder').length){
$('#month-holder').on("blur", function(e){
e.preventDefault();
var month = $("#month-holder").val();
if ( $.isNumeric(month) && parseInt(month) < 13) {
$('#month-error').fadeOut('slow');
$('#month-holder').removeClass("invalid");
}
else
{
$('#month-error').fadeIn('slow');
$('#month-holder').addClass("invalid");
}
});
}
})(jQuery);
if($.isNumeric(month) && parseInt(month) > 13){
$('#month-error').fadeIn('slow');
$('#month-holder').addClass("invalid");
}
else
{
$('#month-error').fadeOut('slow');
$('#month-holder').removeClass("invalid");
}
parseInt(month) > 13
?