Jquery表单验证

Question

我的代码是用于表单validation.Its工作良好但它很长，如果我添加额外的字段再次意味着我想添加更多的代码吗？所以我想简化它。我可以减少这段代码吗？任何人都可以给我一个想法，以简单的方式编写下面的代码吗？在功能现在

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

：

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

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