Question

I’m exploring jQuery and bootstrap.js for a single page site. When not being strong in complex CSS and jQuery this can be a bit of a hassle. My goal is simple building on their hero-box example, which has a login form in the top right corner as seen here: http://twitter.github.com/bootstrap/examples/hero.html

I’ve got a working form for creating users, where i used this example: http://alittlecode.com/files/jQuery-Validate-Demo/

The goal is combining it with something like these notifications/alerts: http://www.w3resource.com/twitter-bootstrap/alerts-and-errors-tutorial.php

The relevant parts i have is:

$(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');
        }
        });


});

And my form looks like this:

                        <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>

Nothing at all happens, and I’m really out of ideas.

The ambition of notification or events are illustrative, my main concern is getting the validation connected to the form.

Thank you in advance!

Answer 1

The problem is that you are not giving the <input>‘s a type. When they dont have a type, validate cannot address the input.

Validate evaluates the input-fields like this

 .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 with no type does not get included. Therefore

<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">

will do the trick!