JQuery - отображение неправильных и правильных значков для проверки
У меня есть форма и проверка JQuery. Все отлично работает Вместо того, чтобы показывать сообщения, я хочу показывать значки.
Неправильный значок работает, но у меня есть проблемы с правильным значком. Когда ввод в правильном формате, я вижуclass="valid"
в синтаксисе<input class="valid"...>
, Я пытаюсь отобразить правильный значок после<input..>
используяclass="valid"
, Правый значок отображается прямо в текстовом поле, и текстовое поле исчезает.ЖИВОЙ КОД
Пожалуйста помоги.
HTML
<form method="POST" id="TestForm">
<input name="txtIn" type="text" id="txtIn">
<p></p>
<button id="submit">Submit</button>
</form>
CSS
label.error:after {
content:"";
display: inline-block;
margin-left:10px;
background: url("http://dummyimage.com/15x15/de1417/de1417.png") no-repeat;
width: 15px;
height: 15px;
}
.valid{
margin-left:10px;
background: green;
width: 15px;
height: 15px;
}
JS
$('#TestForm').validate({
rules: {
txtIn: {
required: true,
rangelength: [8, 16]
}
},
messages: {
txtIn: {
required: "Please enter something",
rangelength: "Icon"
}
}
});
$('.valid').after('<div class="valid"></div>');