1

我有一个需要验证的登录表单。它有几个按钮。我需要以这样的方式验证我的表单，如果用户忘记了按钮中的值，那么我会标记一个错误。但是，成功后，我会转到新页面继续工作。我有以下但验证没有发生。

JQ：

 <script type="text/javascript">
        $(function() {

            $('#txtEmpid').click(
                    {
                        rules: {
                            txtEmpid: {
                                required: true
                            }
                        },
                        errorPlacement: function(error, element) {
                            element.css('background', '#ffdddd');
                        }
                    });
                    $('#txtPassword').click(
                    {
                        rules: {
                            txtPassword: {
                                required: true
                            }
                        },
                        errorPlacement: function(error, element) {
                            element.css('background', '#ffdddd');
                        }
                    });
        });
    </script>

HTML 表单（index.html）：

  <FORM NAME="frmLogin" ACTION="Login.jsp" METHOD="post" >
        <fieldset>
            <div class="text-center">
                <label class="text-center" for="txtEmpid">Employee Id </label>
                <div class="text-center">
                    <input type="text" id="txtEmpid" name ="txtEmpid" placeholder="Employee Id">
                </div>
            </div>
            <div class="text-center">
                <label class="text-center" for="txtPassword">Password</label>
                <div class="text-center">
                    <input type="password" id="txtPassword" name ="txtPassword" placeholder="Password">
                </div>
            </div>
            <div class="text-center">
                <div class="text-center">
                    <button type="submit" class="btn btn-primary">Sign in</button>
                </div>
            </div>
        </FIELDSET>

上面它不起作用。我确信我的 jquery 插件是正确的，因为我可以使用 .validate jquery 方法对整个提交表单进行验证。

我想做验证每个按钮。如果值没问题，那么我会移至新页面（Login.jsp），否则我会留在 index.html 上并标记问题。我该怎么做 ？我的错误是什么？

4

3 回答 3

2

您需要用户.validate.

给表格一个独特的ID。

Demo

HTML

<FORM NAME="frmLogin" ACTION="Login.jsp" METHOD="post" id="FormID">
    <fieldset>
        <div class="text-center">
            <label class="text-center" for="txtEmpid">Employee Id </label>
            <div class="text-center">
                <input type="text" id="txtEmpid" name ="txtEmpid" placeholder="Employee Id">
            </div>
        </div>
        <div class="text-center">
            <label class="text-center" for="txtPassword">Password</label>
            <div class="text-center">
                <input type="password" id="txtPassword" name ="txtPassword" placeholder="Password">
            </div>
        </div>
        <div class="text-center">
            <div class="text-center">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </FIELDSET>
</form>

jQuery

<script type="text/javascript">
    $(function()
    {
        $('#FormID').validate(
        {
            rules: {
                txtEmpid: {
                    required: true
                },
                txtPassword: {
                    required: true
                }
            },
            errorPlacement: function(error, element) {
                element.css('background', '#ffdddd');
            }
        });
    });
</script>
于 2013-03-20T11:26:28.780 回答
1

如果您的 jquery 插件正确，则意味着此代码将帮助您...

<script type="text/javascript">
        $(function() {

            $('#formID').validate(
                    {
                        rules: {
                            txtEmpid: {
                                required: true
                            }
                        },
                        errorPlacement: function(error, element) {
                            element.css('background', '#ffdddd');
                        }
                    });

        });
    </script>
于 2013-03-20T11:18:33.327 回答
1

如果用户仅单击，则您应用了规则。如果用户不单击任何文本框，则这些规则将不适用。

<FORM NAME="frmLogin" ACTION="Login.jsp" METHOD="post" id="formId">

并在提交时调用一个函数

function submitFunction()
{

return  $('#formId').valid();

}

或者

你可以简单地使用

           <input type="text" id="txtEmpid" name ="txtEmpid" class="required" 
           placeholder="Employee Id">

                <input type="password" id="txtPassword" class="required"  
                name ="txtPassword" placeholder="Password">
于 2013-03-20T11:21:38.453 回答