Jquery Formular Validierung

Question

Mein Code ist für Formularvalidierung.Ist funktioniert gut Aber es ist sehr langwierig, Wenn ich zusätzliche Felder hinzufügen bedeutet, dass ich wieder mehr Code hinzufügen möchte? Also möchte ich es einfach machen. Kann ich diesen Code reduzieren? Kann mir jemand eine Idee geben, den folgenden Code auf einfache Weise zu schreiben?

$(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

können Sie diese verkürzen so viel:

$(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')); 

} 

Oder Sie können this in der Funktion args passieren:

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

jetzt in der Funktion:

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