0

単一ページ サイトの jQuery と bootstrap.js を調べています。複雑な CSS や jQuery に強くない場合、これは少し面倒なことになる可能性があります。私の目標は、ここに示すように、右上隅にログインフォームがあるヒーローボックスの例に基づいて簡単に構築することです: http://twitter.github.com/bootstrap/examples/hero.html

私はこの例を使用したユーザーを作成するための作業フォームを持っています: http://alittlecode.com/files/jQuery-Validate-Demo/

目標は、これらの通知/アラートのようなものと組み合わせることです: http://www.w3resource.com/twitter-bootstrap/alerts-and-errors-tutorial.php

私が持っている関連部分は次のとおりです。

$(document).ready(function(){
$.validator.addMethod('validChars', function (value) {

    var iChars = "!#$%^&*()+=-[]\\\';,/{}|\":<>?";

    for (var i = 0; i < value.length; i++) {
        if (iChars.indexOf(value.charAt(i)) != -1) {
         return false;
      }
    }

    return true;

    });


$('#login_form').validate(
        {
        rules: {
            login_email: {
            required: true,
            validChars:true,
            maxlength:50
            },
            login_password: {
            validChars:true,
            required: true
            }
        },
        highlight: function(input) {
            $(input).closest('.control-group').addClass('error');
        },
        unhighlight: function(input) {
            $(input).closest('.control-group').addClass('success');
        }
        });


});

そして、私のフォームは次のようになります。

                        <form id="login_form" name="login_form"; class="navbar-form pull-right control-group" action="">

                        <input  class="span2 control-group"  placeholder="Email" name="login_email" id="login_email">

                        <input  class="span2 control-group"  placeholder="Password" name="login_password" id="login_password">

                        <button class="btn login" type="button" onclick="login();">Sign in</button>
                        <button class="btn requestor" type="button" onclick="createForm();" >Create new account</button>
                    </form>

まったく何も起こらず、私は本当にアイデアがありません。

通知またはイベントの野望は実例です。私の主な関心事は、検証をフォームに接続することです。

前もって感謝します！

4

1 に答える 1

0

<input>問題は、 'sa タイプを指定していないことです。型がない場合、validate は入力に対処できません。

Validate は入力フィールドを次のように評価します

 .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
                "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
                "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
                "[type='week'], [type='time'], [type='datetime-local'], " +
                "[type='range'], [type='color'] ",
                "focusin focusout keyup", delegate)

タイプのない入力は含まれません。したがって

<input type="text" class="span2 control-group"  placeholder="Email" name="login_email" id="login_email">

<input type="text" class="span2 control-group"  placeholder="Password" name="login_password" id="login_password">

トリックを行います！

于 2012-11-22T15:19:18.490 に答える