2016-11-08 94 views
1

我有一个datepicker和1个文本框,现在保存按钮我希望当任何人没有选择这些值时继续我想显示消息填充。意味着在jQuery中验证我是如何做到这一点的?在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> 

我尝试过的if else,但是这是行不通的。

任何解决方案?

+0

把所有的输入型'form'和使用'$(“形式” ).valid();'验证所有字段 – Bharat

+1

你能否提供相关的'html',如果可能的话''fiddle'或'snippet'会很好.. –

+0

http://stackoverflow.com/questions/15060292/a -simple-jquery-form-validation-script#answer-15072147 –

回答

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