在jquery中验证多个文本框

时间:2016-11-08 07:08:22

标签: javascript 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但这不起作用。

任何解决方案?

1 个答案:

答案 0 :(得分: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
}
});
}