есть небольшой плагин для проверки ввода. для input например. проверку еще делаю небольшой регуляркой. и при неправильном вводе присоединяю дивку по .after . проблема в том что при вводе в другом инпуте after удаляется. а нужно чтобы оставался
//сам плагин
(function ($) {
$.fn.textchanged = function() {
$.event.special.textchange.triggerIfChanged($(this));
};
$.event.special.textchange = {
setup: function (data, namespaces) {
$(this).data('lastValue', this.contentEditable === 'true' ? $(this).html() : $(this).val());
$(this).bind('keyup.textchange', $.event.special.textchange.handler);
///$(this).bind('keydown.textchange', $.event.special.textchange.handler);
if ($(this).attr('type') == 'search') {
$(this).bind('click.textchange', $.event.special.textchange.handler);
}
$(this).bind('cut.textchange paste.textchange input.textchange', $.event.special.textchange.delayedHandler);
},
teardown: function (namespaces) {
$(this).unbind('.textchange');
},
handler: function (event) {
$.event.special.textchange.triggerIfChanged($(this));
},
delayedHandler: function (event) {
var element = $(this);
setTimeout(function () {
$.event.special.textchange.triggerIfChanged(element);
}, 25);
},
triggerIfChanged: function (element) {
var current = element[0].contentEditable === 'true' ? element.html() : element.val();
if (current !== element.data('lastValue')) {
element.trigger('textchange', [element.data('lastValue')]);
element.data('lastValue', current);
}
}
};
$.event.special.hastext = {
setup: function (data, namespaces) {
$(this).bind('textchange', $.event.special.hastext.handler);
},
teardown: function (namespaces) {
$(this).unbind('textchange', $.event.special.hastext.handler);
},
handler: function (event, lastValue) {
if ((lastValue === '') && lastValue !== $(this).val()) {
$(this).trigger('hastext');
}
}
};
$.event.special.notext = {
setup: function (data, namespaces) {
$(this).bind('textchange', $.event.special.notext.handler);
},
teardown: function (namespaces) {
$(this).unbind('textchange', $.event.special.notext.handler);
},
handler: function (event, lastValue) {
if ($(this).val() === '' && $(this).val() !== lastValue) {
$(this).trigger('notext');
}
}
};
})(jQuery);
jQuery(document).ready(function($){
var err_fb = $("<div class=\"c-validation\">Допустимы: только латиница, цифры и точка</div>");
var err_fb1 = $("<div class=\"c-validation\">Допустимы: 111 только латиница, цифры и точка</div>");
var inputs = $('#edit-soc input');
var regexp = /^[a-z0-9\.]+$/;
inputs.on("textchange", $.event.special.textchange, function(event, previousText){
//$(this).on("keyup blur focus change", function(e){
console.log($("input").val() + " - " + regexp.exec($("input").val()));
if (regexp.exec($("input").val()) === null ) {
$(this).after(err_fb );
}
});
inputs.each(function (i, input){
if ($(input).val() === ''){ return; }
var input = $(input);
console.log($(input).val() + " - " + regexp.exec($(input).val()));
if (regexp.exec($(input).val()) === null ) {
$(input).after(err_fb1 );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="/u/2242/s" method="post" id="form-soc" accept-charset="UTF-8" class="hideSubmitButton-processed">
<fieldset class="collapsible form-wrapper collapse-processed" id="edit-soc">
<div class="main-fld">
<input placeholder="Имя" type="text" id="edit-fb-profile" name="fb_profile" value="222kkk" size="60" maxlength="128" class="form-text">
<input placeholder="Им" type="text" id="edit-fb-page" name="fb_page" value="123hhh" size="60" maxlength="128" class="form-text">
</div></fieldset>
<input type="hidden" name="form_build_id" value="form-ktPa_acH6rkjsM0_Bmr93rKs0I9a22LvNLUJ8jTaBmM">
<input type="hidden" name="form_token" value="w8ZV3UUf5HiwZISwyK8EsO-k0REHqlNiSUY_y_57AFs">
<input type="hidden" name="form_id" value="uss_form_soc">
<input type="submit" id="edit-submit" name="op" value="Сохранить" class="form-submit"></form>
Не понимаю, как сделать увы. опыта с jquery практически нет. но стараюсь. Заранее извините за неправильности