入力検証に使用する関数を作成するJquery

Question

ここでは、入力が無効なときにエラーを表示するテキストボックスがあります。私は2つのスパンでエラーを表示する関数を作るので、私は冗長性を防ぐだろうと思っています。ここに私のhtmlファイル

<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"); 
    } 
    }); 

私はあなたがこれは機能でより多くの検証を行うことができます

Answer 1

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>

jqueryのセレクタについての小さな知識を持っているので、誰かが関数を作成するにはイム苦労原因私を助けることができます簡単な例。