jQuery验证和bootstrap.js - 通知/错误

我正在探索单个页面站点的jQuery和bootstrap.js。如果在复杂的CSS和jQuery中不够强大，这可能会有点麻烦。我的目标是在他们的英雄盒例如简单的建筑，它在右上角的登录形式，在这里看到：http://twitter.github.com/bootstrap/examples/hero.html jQuery验证和bootstrap.js - 通知/错误

我有一个工作形式，创建用户，在这里我用这个例子：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>

一点都没有发生，我真的没有想法。

通知或事件的野心是说明性的，我主要关心的是验证与表单相关。

预先感谢您！

来源

2012-11-21 Peter Lindhard

你有什么错误吗？ –

零错误，遗憾离开了。麻烦的是验证器不处理表单。高光/不高光永远不会被调用。 –

问题是你没有给<input>的一个类型。当他们没有类型时，验证无法处理输入。

验证评估这样

.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-22 15:19:18 davidkonrad

谢谢！可爱的解释也。 –

jQuery验证和bootstrap.js - 通知/错误

回答

相关问题