jqueryで複数のテキストボックスを検証

Question

私は1つのdatepickerと1つのテキストボックスと保存ボタンを持っています。私はそれをどのようにjqueryで検証する手段ですか？

<script type="text/javascript"> 
     $(function() { 
      $('#ser').on('click', 'tr', function() { 
       if ($(this).hasClass('selected')) { 
        $(this).removeClass('selected'); 
       } 
       else { 
        $('#ser', 'tr.selected').removeClass('selected'); 
        $(this).addClass('selected'); 
       } 
       var row = $(this); 
       var ID = row.find('td')[0].firstChild.data; 
       $('[ID*=compl]').on('click', function() { 
        $("#dialog1").dialog(); 
        $('[ID*=save]').on('click', function() {      
         var VID = '<%=Session["value"]%>'; 
         var date = $("#last_perf").val(); 
         var meter = $("#txt_m").val(); 
         var TypeID = '2'; 
         var comp = {}; 
         comp.date = date; 
         comp.meter = meter; 
         comp.VID = VID; 
         comp.ID = ID; 
         comp.TypeID=TypeID; 
         compl_serv(comp); 

        }); 
       }); 
      }); 
     }); 

     function compl_serv(comp) { 

      debugger; 
      var c = {}; 
      c.date = comp.date; 
      c.meter = comp.meter; 
      c.VID = comp.VID; 
      c.ID = comp.ID; 
      c.TypeID = comp.TypeID; 

      debugger; 
      $.ajax({  
       type: "POST", 
       url:"a.aspx/CSe", 
       contentType: "application/json;charset=utf-8", 
       dataType: "json", 
       data:JSON.stringify(c), 
       async: true, 
       cache: false, 
       success: function (result) { 

        var co = JSON.parse(result.d).response;    

          if (result.length !== "") 
         { 
      $("#last_perf" + comp.date).html(comp.date); 
          $("#txt_m" + comp.meter).html(comp.meter); 


          $("#<%=save_complete_label.ClientID%>").text("successfully"); 
         } 

         else 
         {        
          $("#<%=save_complete_label.ClientID%>").text("Fill all fields");        
         } 

       }, 

    </script> 

HTML

 <div id="dialog1" class="ui-dialog" style="display:none" title="Basic dialog"> 

      <table class="auto-style1"> 
     <tr> 
      <td> <asp:Label ID="Label2" runat="server" Text="Label">Date</asp:Label> </td> 
      <td> <input id="last_perf" class="f" value="dd/mm/yyyy" runat="server" clientidmode="static" /><br /><br /></td> 
     </tr> 
     <tr> 
      <td><asp:Label ID="Label3" runat="server" Text="Label">meter</asp:Label></td> 
      <td> <input id="txt_m" type="text" runat="server" clientidmode="static" /><br /><br /></td> 
     <tr> 
      <td> <button type="button" class="btn btn-primary" id="save">Save completed services</button><br /><br /></td> 
      <td> 
        <asp:Label ID="save_complete_label" CssClass="label label-success" runat="server" Text=""></asp:Label> 
      </td> 
     </tr> 
    </table> 

      </div> 

私は他の場合には通じてみたが、これは動作しません。

すべてのソリューションはありますか？

Answer 1

あなたがvalidate.jsを使用することができ、それはjqueryの中でサポート可能です

http://rickharrison.github.io/validate.js/ https://validatejs.org/

形であなたのHTMLコードを入れてください。あなたもルールを記述することができ ：すでに例のコードは以下のフォームを使用している場合

jsのコード例を：http://jsfiddle.net/beshur/D8tWs/

var validator = new FormValidator('example_form', [{ 
name: 'req', 
display: 'required', 
rules: 'required' 
}, 
{ 
name: 'alphanumeric', 
rules: 'alpha_numeric' 
}, { 
name: 'password', 
rules: 'required' 
}, { 
name: 'password_confirm', 
display: 'password confirmation', 
rules: 'required|matches[password]' 
}, { 
name: 'email', 
rules: 'valid_email', 
depends: function() { 
    return Math.random() > .5; 
} 
}, { 
name: 'minlength', 
display: 'min length', 
rules: 'min_length[8]' 
}], function(errors, event) { 
if (errors.length > 0) { 
    // Show the errors 
} 
}); 
}