Recentemente saiu a última versão do Twitter Bootstrap e esta trouxe alguma novidades. Entre outras mudanças a semântica dos formulários alterou-se um pouco.

Para quem usa o jQuery Validation Plugin para validar os seus formulários tem que fazer algumas alterações para que este funcione correctamente com o bootstrap 3.

Exemplo:

Primeiramente é necessário criar um formulário. Para este exemplo, criamos dois campos de texto (‘firstname’ e ‘lastname’) e um botão para submeter um formulário.

<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>
        
    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" data-menssage-required="ola mundo" type="text" />
        </div>
    </div>
    
        <button type="submit" class="btn btn-primary">Submit</button>
</form>

Em seguida iremos adicionar a validação do formulário. Depois de incluímos o plugin, é necessário alterar algumas opções para torna-lo completamente compatível com o TB3.

    $('form').validate({
        rules: {
            firstname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lastname: {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

As opções:

• “highlight” e “unhighlight” adicionam e removem a classe .has-error aos elementos inválidos;
• “errorElement” define o elemento a usar como erro. Pode definir “p” ao invés de “span”;
• “errorClass” define a classe do elemento com o erro;
• “errorPlacement” altera o locar onde a mensagem de erro é colocada;

Caso se tenha mais que um formulário na nossa aplicação, pode-se definir estas propriedades como pré-definidas, evitando assim tendo de se repeti-las.

    $.validator.setDefaults({
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

Demo: http://jsfiddle.net/mapb_1990/hTPY7/9/

Estou aqui para apresentar o meu recente projecto. O LeroLero.

O Fabuloso Gerador de LeroLero está de volta! Só que dessa vez um pouco diferente. Além de gerar textos gigantescos ele também oferece a possibilidade  de gerar frases muito bem escritas que não fazem o menor sentido! Perfeito para políticos, estudantes e twitteiros. =D

Nesta nova versão também existe a possibilidade de partilhar as frases pelas principais redes sociais só com dois cliques.

Portanto já sabe, quando o lero lero estiver muito intenso à sua volta no Twitter, no Facebook ou até mesmo no MSN, use o gerador de frases lero-lero e seja feliz!

Para finalizar em alto estilo:

Existem dúvidas a respeito de como a expansão dos mercados mundiais cumpre um papel essencial na formulação do orçamento sectorial. Por conseguinte, o novo modelo estrutural aqui preconizado nos obriga à análise dos relacionamentos verticais entre as hierarquias.

Huahuahua! Boa diversão e até a próxima! =D

PS: Para gerar as frases é só aceder ao site, clicar no robot e pronto. =)

• Site: http://lerolero.miguelborges.com/
• Facebook: https://www.facebook.com/gerador.lerolero
• Twitter: https://twitter.com/leroleropt

Por vezes, no contacto com um potencial cliente, percebemos a incerteza do cliente sobre a presença online da sua empresa. O cliente não está convencido que quer um website. Hesita nos conceitos, naquilo que pretende. Às vezes, quer apenas um email, uma coisa simples, depois vê-se. Já ouvi um pouco de tudo.
Este artigo tenta resumir os melhores argumentos para explicar o potencial da Internet para qualquer empresa, seja micro, pequena, média ou até uma grande empresa. A Internet não é o futuro, é o presente. Quem não percebe esta realidade, está a perder oportunidades, competitividade e uma boa parte na facturação.

Ler mais