сохранение проверки значения для input

242
29 марта 2017, 17:01

есть небольшой плагин для проверки ввода. для 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 практически нет. но стараюсь. Заранее извините за неправильности

Answer 1

Я вам предлагаю поставить блоки ошибок прямо в нужное место, и скрыть их через 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, т.к. мне кажется, у вас ошибка в этом месте.

READ ALSO
Проблема с селекторами

Проблема с селекторами

У нас есть n-блоков !В каждом есть селекторная выборка!Проблема в том что если я выбираю из списка в 1 блоке , то значения передаються и всем...

221
Добавление текста из полей input в textarea jquery

Добавление текста из полей input в textarea jquery

Совершенно недавно начал изучать руби и jqueryСтолкнулся с проблемой вроде все просто, но что-то не получается

308
Обработчик по нажатию кнопки, который в базе данных поменяет значение jquery

Обработчик по нажатию кнопки, который в базе данных поменяет значение jquery

Необходимо при нажатии так скажем поменять время в таблице на Timenow

208
Unexpected token -

Unexpected token -

Почему вattr() тригерится ошибка Unexpected token -? Где там вообще дефис?

271