jQuery Validate隐藏输入

Question

I'm trying to validate a short form with jQuery Validate

this is my function:

$('#add').click(function(){
    $('#addForm').validate({
        rules: {
            "nombre": {
                required: true
            },
            "cajas": {
                required: true
            },
        },

        messages: {
            "nombre": "Campo obligatorio",
            "cajas": "Campo Obligatorio",
        }
    });
});

and this is my form:

<?= form_open('Sucursales/agregarSucursal', 'class="form-inline targen text-center" id="addForm"') ?>
        <div class="form-group">
            <label>Nombre: </label>
            <input type="text" name="nombre" id="nombre" class="form-control">
        </div>
        <div class="form-group">
            <label>Número de Cajas: </label>
            <input type="text" name="cajas" id="cajas" class="form-control">
        </div>
        <div class="form-group">
            <button class="btn btn-inverse btnInline" id="add">Agregar</button>
        </div>
<?=form_close()?>

When i try to make the validation leaving the fields empty, the input is hidding i don't know why and i can't figure my error.

Can you help me guys?

Thanks in advance

These are the images of the form and the hidden inputs when you hit the button when the fields are empty

JsFiddle: My JsFiddle

Answer 1

If your script is correct.Then replace view file as follows:

<? echo form_open('Sucursales/agregarSucursal', array('class'=>'form-inline targen text-center', 'id'=>'addForm')); ?>
        <div class="form-group">
            <label>Nombre: </label>
            <input type="text" name="nombre" id="nombre" class="form-control">
        </div>
        <div class="form-group">
            <label>Número de Cajas: </label>
            <input type="text" name="cajas" id="cajas" class="form-control">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-inverse btnInline" id="add">Agregar</button>
        </div>
<? echo form_close();?>

Answer 2

Thanks to all guys, i already found the cause of this:

I don't know why but removing

<div class="form-group"></div>

That contains the input and label of the form makes that all works like a charm