jQuery Дата проверки группы

Это мой первый вопрос о stackoverflow. Я искал решение, но я не мог найти его.jQuery Дата проверки группы

Я создаю форму, и я использую плагин jQuery-validation для ее проверки. В форме у меня есть 3 поля ввода для даты рождения (DD/MM/YYYY).

Я сгруппировал поля, чтобы получить только одно сообщение об ошибке на дату. В проверке я указал minlength для всех полей (2, 2 и 4 для получения DD/MM/YYYY).

Пока я вхожу в дату, валидация работает. Но если последнее введенное поле подтверждает, то сообщение об ошибке исчезло! (. Я сделал некоторые интересные скриншоты, но я не разрешается размещать изображения пока)

Я сделал JSFiddle прояснить проблему:

JSFiddle demo

попробуйте ввести дату D/M/YYYY, а затем переместите фокус на «какое-то поле» или D/MM/YYYY.

Любые идеи по решению? Что я делаю не так?

<!DOCTYPE html> 
<html> 
<head>  

    <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script> 

    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 

    <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script> 

    <style type='text/css'> 
    input[type="text"]{ 
     border:0px; 
    } 

    .input_container{ 
     float:left; 
     padding:5px; 
     margin:5px; 
     border: 1px solid black; 
     border-radius: 3px; 
    } 

    .btn_container{ 
     clear:both; 
     margin:5px;  
    } 

    div.error{ 
     border: 2px solid #FF0000; 
    } 

    label.error{ 
     font-weight:bold; 
     color: #FF0000; 
    } 
    </style> 

<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){ 
$('#frm').validate({ 
    rules:{ 
     DoB_day:{ 
      required: true, 
      minlength: 2 
     }, 
     DoB_month:{ 
      required: true, 
      minlength: 2 
     }, 
     DoB_year:{ 
      required: true, 
      minlength: 4 
     }  
    }, 

    groups:{ 
     dateOfBirth: "DoB_day DoB_month DoB_year" 
    }, 

    messages:{ 
     DoB_day:{ 
      required: "Please enter a date", 
      minlength: "Format the day as DD" 
     }, 
     DoB_month:{ 
      required: "Please enter a date", 
      minlength: "Format the month as MM" 
     }, 
     DoB_year:{ 
      required: "Please enter a date", 
      minlength: "Format the year as YYYY" 
     }     
    }, 

    highlight: function(element){ 
     $(element).parent('div').addClass('error'); 
    }, 

    unhighlight: function(element){ 
     $(element).parent('div').removeClass('error'); 
    }, 

    errorLabelContainer: ".error", 

}); 
});//]]> 

</script> 

</head> 

<body> 
    <form id="frm" name="frm" method="POST"> 

    <div class="input_container"> 
     <input type="text" id="DoB_day" name="DoB_day" size="1" placeholder="DD"/>/
     <input type="text" id="DoB_month" name="DoB_month" size="1" placeholder="MM" />/
     <input type="text" id="DoB_year" name="DoB_year" size="3" placeholder="YYYY" /> 
    </div> 

    <div class="input_container"> 
     <input type="text" id="somefield" placeholder="somefield" /> 
    </div> 

    <div class="btn_container"> 
     <input type="submit" value="submit" />  
    </div> 

</form> 

<label class="error"> &nbsp; </label> 

</body> 


</html>

источник

2014-10-17 AdeZ

Почему вы используете версию 1.7 плагина JQuery Validation? Последняя версия - 1.13.0, и с тех пор исправлено множество ошибок. – Sparky

Прошу прощения, скопировал неправильную версию. В живой версии я использовал версию 1.12.0. Я только что обновил их до 1.13.0, но это ничего не изменило. – AdeZ

Вы можете заставить проверку произойти, когда фокус теряется из DoB_year:

$("#DoB_year").blur(function() { 
    $('#frm').valid(); 
});

источник

2014-10-17 13:22:32

Это не то, как вы «принудительно проверяете». Метод '.validate()' - это только то, как вы должны _initialize_ плагина, а не запускать проверку. – Sparky

мой плохой синтаксис. Я обновил свой ответ. –

jQuery Дата проверки группы

ответ

Смежные вопросы