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>

上記は機能しません。.validate jquery method を使用して送信フォーム全体の検証を行うことができるため、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

ユーザーがクリックする場合のみルールを適用しました。ユーザーがテキストボックスをクリックしない場合、ルールは適用されません。

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

onsubmitで関数を呼び出します

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 に答える
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 に答える