単一ページ サイトの 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>
まったく何も起こらず、私は本当にアイデアがありません。
通知またはイベントの野望は実例です。私の主な関心事は、検証をフォームに接続することです。
前もって感謝します!