Style input through jQuery Validate

Asked

Viewed 240 times

2

I am using the jQuery Validate plugin to validate a form. When I declare the rules in the input declaration the form turns red when it doesn’t fit, and blue when it fits. Here is an example of an input declaration with in-line rules:

<div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input class="span4" id="nome" size="16" name="nome" type="text" placeholder="Nome" required minlength="2">
</div>

However, when I do the validation through a function, the form does not receive the styling. I think it’s something from Bootstrap or something similar. Follow example of validation through function:

        <script type="text/javascript">
        $(document).ready( function() {
           $("#idCadastro").validate({
            rules: {
                nome: {
                    required: true, minlength: 2
                }
            messages: {
                nome: {
                    required: "Digite o seu nome", minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
                }
           });
        });
      </script>

What I’d like to know is if there’s a way for me to do the styling myself using function validation or some result that it provides.

javascript html css

2 answers

1

The structure of the object you are passing to the Validate() function seems to be wrong. Rules{},messages{} must be separated. As it did, the message object seems to be the child of the Rules object. I suggest looking calmly at the documentation of the plug you are using and see how to mount this object the right way.

In this link you can test and see the implementation of a working Jqueryvalidate http://jsfiddle.net/sw87W/359/

I hope I’ve helped.

  • Yeah, I forgot to put a comma here

  • But as for what I asked, there’s something to be done?

  • I did the Jsfiddle test of your code and implemented some fixes. see if it works link By default jQueryValidate enters the class error the input that did not pass the validation and Valid if you pass. You only need a css to control the colors

  • 1

    Thanks Pablo, through your test I managed to perform the stylization I wanted in my form! = D

  • Ok, Anderson. Help other users who experience the same situation by signaling my answer as accepted. Abs

0

Hello, follow the link where we have an example of using Jquery validate... Access the Site

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.