есть небольшой плагин для проверки ввода. для 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 практически нет. но стараюсь. Заранее извините за неправильности
Я вам предлагаю поставить блоки ошибок прямо в нужное место, и скрыть их через CSS. Так будет проще, да и html-код не надо будет в JS хранить.
Затем когда нужно будет показать ошибку - просто покажите блок:
if (regexp.exec($(this).val()) === null ) {
$(this).next('.c-validation').show();
}else{
$(this).next('.c-validation').hide();
}
Но: "Допустимы: только латиница, цифры и точка" - это одно состояние. А я хочу как минимум два три.
Вот такой вариант:
Можно использовать data-атрибуты. В них можно хранить любую информацию, например, тип проверки поля:
<input ... data-type="all" placeholder="Здесь можно: латиница, цифры и точку">
<input ... data-type="lat" placeholder="Здесь можно: только латиница">
Затем в скрипте получить это значение и выбрать регулярку относительно него:
if ($(this).data('type') == "all") {
var regexp = /^[a-z0-9\.]+$/;
}else{
var regexp = /^[a-z]+$/;
}
(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 inputs = $('#edit-soc input');
inputs.on("textchange", $.event.special.textchange, function(event, previousText) {
if ($(this).data('type') == "all") {
var regexp = /^[a-z0-9\.]+$/;
}else if ($(this).data('type') == "numbers") {
var regexp = /^[0-9\.]+$/;
}else{
var regexp = /^[a-z]+$/;
}
if (regexp.exec($(this).val()) === null) {
$(this).next('.c-validation').show();
} else {
$(this).next('.c-validation').hide();
}
});
});
.c-validation {
display: none;
}
<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 type="text" id="edit-fb-profile" name="fb_profile" value="" data-type="numbers" placeholder="Здесь можно только цифры и точку" size="60" maxlength="128" class="form-text">
<div class="c-validation">Допустимы: только цифры и точка</div>
<input type="text" id="edit-fb-page" name="fb_page" value="" size="60" data-type="all" placeholder="Здесь можно: латиница, цифры и точку" maxlength="128" class="form-text">
<div class="c-validation">Допустимы: только латиница, цифры и точка</div>
<input type="text" id="edit-fb-page" name="fb_page" value="" size="60" data-type="lat" placeholder="Здесь можно только латиница и все" maxlength="128" class="form-text">
<div class="c-validation">Допустимы: только латиница</div>
</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>
PS. кстати, я исправил $("input").val()
на this
, т.к. мне кажется, у вас ошибка в этом месте.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
У нас есть n-блоков !В каждом есть селекторная выборка!Проблема в том что если я выбираю из списка в 1 блоке , то значения передаються и всем...
Совершенно недавно начал изучать руби и jqueryСтолкнулся с проблемой вроде все просто, но что-то не получается
Необходимо при нажатии так скажем поменять время в таблице на Timenow