CODEWITHSUNDEEP
jquerytwitter-bootstrapjquery-validate
Miguel Borges
Miguel Borges

Reputation: 7659

customise validate jquery plugin

I have a form that is validated by the validate jquery plugin.

<form action="" id="contact-form" class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="name">Nome:</label>
            <div class="controls">
                <input type="text" class="input-xlarge" name="name" id="name" placeholder="Indique o seu nome" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="email">Email:</label>
            <div class="controls">
                <input type="email" class="input-xlarge" name="email" id="email" placeholder="Indique o seu email" />
            </div>
        </div>
        <!-- ... -->
    </fieldset>
</form>

the script code:

$('form#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        // ...
    },
    highlight: function(label) {
        $(label).closest('.control-group').addClass('error').removeClass('success');
    },
    success: function(label) {
        label.closest('.control-group').addClass('success');
    },
    submitHandler: function(form) {
        $('form#contact-form').slideUp("slow", function() {
            $(this).before('<div class="alert alert-success"><h4>Informação</h4>Mensagem Enviada com sucesso.</div>');
            setTimeout(function () {
                $('#modal').modal('hide');
            }, 3000);
        });
        return false;
    }
});

I have two questons:

  1. what they needed was that when an error was corrected, the .error class was removed and the generated label was removed.
  2. what is the rule that I have to put an element that I have a concrete value, for example the number 8?

when element contains a error, the code looks like:

<div class="control-group error">
    <label class="control-label" for="email">Email:</label>
    <div class="controls">
        <input type="email" class="input-xlarge" name="email" id="email" placeholder="Indique o seu email">
        <label for="email" generated="true" class="error" style="">Por favor introduza um endereço de email válido.</label>
    </div>
</div>

when the error is corrected, the code looks like:

<div class="control-group error success">
    <label class="control-label" for="name">Nome:</label>
    <div class="controls">
        <input type="text" class="input-xlarge" name="name" id="name" placeholder="Indique o seu nome">
        <label for="name" generated="true" class="error" style=""></label>
    </div>
</div>

Upvotes: 0

Views: 618

Answers (1)

11mb
11mb

Reputation: 1359

  1. Change your success function to this:

    success: function(label) {
    label.closest('.control-group').removeClass('error').addClass('success');
}

    It is not wise to remove the generated=true param from the html-tag. I've done that in the past and it only add troubles to the validation functionality.

  2. You can add a method:

    $.validator.addMethod("equalTo", function(value, element, param) { return (value == param); });

    than in your rules:

    name: {
    minlength: 2,
    required: true,
    equalTo: "8"
}

Upvotes: 1

Related Questions