Question

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

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

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

http://jsfiddle.net/xA7hH/

Answer 1

猜猜这会对你有所帮助：

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

Answer 2

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

如果输入数量与非空输入一样多，则启用。

Answer 3

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

表单上的简单验证

3 个答案: