Jqueryフォームのバリデーション

Question

私のコードはフォームバリデーションのためのものです。それはうまくいきます。余分なフィールドを追加すると、もう少しコードを追加したいのですか？このコードを減らすことはできますか？誰も私に簡単な方法で次のコードを書く考えを与えることができますか？

$(document).ready(function(){ 
 
\t  $('#fromDate').click(function(){ 
 
      $(this).addClass('visited'); 
 
     }); 
 
     $('#toDate').click(function(){ 
 
      $(this).addClass('visited'); 
 
     }); 
 
}); 
 
function apply(){ 
 
     var FirstName=$('#name').val(); 
 
     if(FirstName==""){ 
 
      $('#name').addClass("error"); 
 
     }else{ 
 
      $('#name').removeClass("error"); 
 
     } 
 

 
     $('#fromDate').hasClass('visited')?$("#fromDate").removeClass("error"):$("#fromDate").addClass("error"); 
 
     $('#toDate').hasClass('visited')?$("#toDate").removeClass("error"):$("#toDate").addClass("error"); 
 

 
}

.error{ 
 
\t border:1px solid #FF0000 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<label>Name</label> 
 
<input type="text" name="fname" id="name"> 
 
<label>From</label> 
 
<input type="date" name="" id="fromDate"> 
 
<label >Date To</label> 
 
<input type="date" name="" id="toDate"> 
 
<button class="send" onclick="apply()">Send</button> 
 
</form>

Answer 1

あなたは同じくらい、これを短縮することができます。

$(document).ready(function() { 
    $('#fromDate, #toDate').click(function() { 
    $(this).addClass('visited'); 
    }); 
}); 

function apply() { 
    var FirstName = $('#name').val(); 
    $('#name').toggleClass("error", FirstName == ""); 

    $("#fromDate").toggleClass("error", !$('#fromDate').hasClass('visited')); 
    $("#toDate").toggleClass("error", !$('#toDate').hasClass('visited')); 

} 

それとも、関数引数でthis渡すことができます。機能になりました

<button class="send" onclick="apply(this)">Send</button> 

を：

function apply($this) { 
    var $els = $this.siblings('input'); 
    $els.each(function(){ 
    $(this).toggleClass("error", $(this).val() == ""); 
    }); 
}