2

我必须使用 jquery 制作简单的验证表单，（没有 3rd 方插件）为此我编写了以下代码..

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <style>
        .InvaildField {
             border: 0.5px solid red;
        }
    </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#btnSubmit').attr("disabled", true);
                $('.emptyField').blur(function () {
                    if ($(this).val() == '') {
                        $(this).removeAttr('class');
                        $(this).addClass('InvaildField');
                        $('#btnSubmit').attr("disabled", true);
                    } else {
                        $(this).removeAttr('class');
                        $('#btnSubmit').attr("disabled", false);
                    }
                });
                $('.emptyField').keyup(function () {
                    if ($(this).val() == '') {
                        $(this).removeAttr('class');
                        $(this).addClass('InvaildField');
                        $('#btnSubmit').attr("disabled", true);
                    } else {
                        $(this).removeAttr('class');
                        $('#btnSubmit').attr("disabled", false);
                    }
                });
            });
        </script>
    </head>
        <body>
            <table>
                <tr>
                    <td>Name</td>
                    <td><input  class="emptyField" type="text"/></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input class="emptyField" type="text"/></td>
                </tr>
                <tr>
                    <td>Mobile Number</td>
                    <td><input class="emptyField" type="text"/></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input id="btnSubmit" class="emptyField" type="button" value="Submit"/>
                    </td>
                </tr>
            </table>
        </body>
    </html>

但问题是当我填充第一个文本框时，按钮已启用，当所有 texboxes 不为空时如何启用按钮，

http://jsfiddle.net/xA7hH/

4

3 回答 3

0 
if($('input[value=""]').length == $('input').length) {
  $('#btnSubmit').removeAttr('disabled');
}

如果您有与输入数量一样多的非空输入，请启用。

于 2012-11-26T12:34:50.527 回答
0

猜猜这会帮助你：

        <table>
            <tr>
                <td>Name</td>
                <td><input  class="emptyField" onkeyup="check()" type="text"/></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input class="emptyField" onkeyup="check()" type="text"/></td>
            </tr>
            <tr>
                <td>Mobile Number</td>
                <td><input class="emptyField" onkeyup="check()" type="text"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input id="btnSubmit" class="emptyField" disabled="disabled" type="button" value="Submit"/>
                </td>
            </tr>
        </table>

    <script type="text/javascript">

        function check(){
            var allFilled = true;
            $(".emptyField").each(function(){
                if(!$(this).val()){
                    allFilled = false;
                    return false;
                }
            });
            if(allFilled)
                $('#btnSubmit').removeAttr("disabled")
            else
                 $('#btnSubmit').attr("disabled", "disabled");
        }

    </script>
于 2012-11-26T12:24:56.083 回答
0 
<script type="text/javascript">

        $(document).ready(function () {

            $('#btnSubmit').attr("disabled", true);

            $('.emptyField').on("keyup blur", function () {

                if($(this).val().length == 0)
                {
                    $(this).addClass('InvaildField');
                }
                else
                {
                   $(this).removeClass('InvaildField');
                }


                var len = true;

                $(':text').each(function () {

                   if ($(this).val().length == 0) 
                    {
                        len = false;                    
                    }
                });

                if (!len) {        
                    $('#btnSubmit').attr("disabled", true);
                } else {
                    $('#btnSubmit').attr("disabled", false);
                }
            });

        });
        </script>

并更改 .InvaildField 为

.InvaildField {
     border:1px solid red;
}
于 2012-11-26T12:51:29.413 回答