Jquery, создающий функцию, которая будет использоваться для проверки ввода

У меня есть текстовое поле, отображающее ошибку, когда вход недействителен. Мне интересно, как создать функцию, которая отображает ошибку в двух диапазонах, поэтому я предотвращу избыточность. Вот мой HTML файлJquery, создающий функцию, которая будет использоваться для проверки ввода

<div class="form-group row has-feedback" id="username-group"> 
      <div class="col-sm-4"><label class="control-label">Username</label></div> 
      <div class="col-sm-8"> 
       <div> 
       <input type="text" name="username" id="username" value="<?php echo $username;?>" class="form-control user-required" required> 
       <span id="username-feedback" class="glyphicon form-control-feedback hidden"></span> 
       </div> 
       <div><span class="small font-design error_span"><?php if(isset($usernameErr)){echo $usernameErr;} ?></span></div> 
      </div> 
      </div>

И вот что я сделал до сих пор в пролете с классом error_span

function checkEmpty(id){ 
    if($(id).val()==""){ 
    $(id)[0].setCustomValidity('Please fill out this field'); 
    $(id).closest('.form-group').find('.error_span').text("Please fill out this field").removeClass("hidden").addClass("text text-danger"); 
    } 
    else{ 
    $(id)[0].setCustomValidity(''); 
    $(id).closest('.form-group').find('.error_span').text("").addClass("hidden").addClass("text text-danger"); 
    } 
} 
$(".user-required").blur(function(){ 
    checkEmpty("#" + $(this).attr('id')); 
});

И мой код, который я думаю, будет излишним здесь. Он добавит значок обратной связи в текстовое поле.

if($("#username").val()==existing){ 
      $("#username-feedback").addClass("glyphicon-remove"); 
      $("#username-feedback").removeClass("glyphicon-ok hidden"); 
      $("#username-group").removeClass("has-success"); 
      $("#username-group").addClass("has-error"); 
      $("#username")[0].setCustomValidity('username not available'); 
      $("#username").closest('.form-group').find('.error_span').text("username not available").removeClass("hidden").addClass("text text-danger"); 
     } 
     else{ 
      $("#username-feedback").addClass("glyphicon-ok"); 
      $("#username-feedback").removeClass("glyphicon-remove hidden"); 
      $("#username-group").removeClass("has-error"); 
      $("#username-group").addClass("has-success"); 
      $("#username")[0].setCustomValidity(''); 
      $("#username").closest('.form-group').find('.error_span').text("").addClass("hidden"); 
     } 
$("#username").blur(function(){ 
    if($("#username").val()==""){ 
     $("#username-feedback").addClass("glyphicon-remove"); 
     $("#username-feedback").removeClass("glyphicon-ok hidden"); 
     $("#username-group").removeClass("has-success"); 
     $("#username-group").addClass("has-error"); 
     $("#username")[0].setCustomValidity('Please fill out this field'); 
     $("#username").closest('.form-group').find('.error_span').text("Please fill out this field").removeClass("hidden").addClass("text text-danger"); 
    } 
    });

может кто-то помочь мне причина им возникли проблемы в создании функции, потому что у меня есть небольшое знание о селекторе Jquery

источник

2016-10-07 healer

Можете ли вы уточнить, в чем проблема? –

Все эти коды являются валидацией ввода. Я использую эту партию во всей своей форме. Я хочу создать для нее многократно используемую функцию, но я не знаю, что делать. Я уже создал одну функцию: checkEmpty(), но я хочу добавить класс has-feedback в другой диапазон и я не могу подумать о селекторе jquery, который можно использовать – healer

function saveForm(){ 
 
\t \t 
 
\t \t var lenName = $('#nameInput').val().length; 
 
\t \t 
 
\t \t 
 
\t \t if (lenName <= 0) { \t 
 
\t \t \t $(".alert").text("Error submiting the form, please fill all the fields!"); 
 
      $(".alert").show(); 
 
     } 
 
\t \t else{ 
 
\t \t \t $(".alert").hide(); 
 
\t \t \t $("#form").submit(); 
 
\t \t } 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form class="form" action="test.html" method="post" id="form"> 
 

 
\t \t <div class="alert" style="display: none;"></div> 
 
\t \t <input name="name" type="text" class="form-control" id="nameInput" placeholder="Name"> 
 
\t 
 
    <br> 
 
\t <button type="button" onclick="saveForm()">Submit</button> 
 

 
</form>

Вы можете сделать больше проверки в функции этого является простой пример.

источник

2016-10-07 13:27:50

Jquery, создающий функцию, которая будет использоваться для проверки ввода

ответ

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