CODEWITHSUNDEEP
javascriptjquerymeteorjquery-validatebootstrap-modal
ccdiego5
ccdiego5

Reputation: 666

jquery validate in modal with meteorjs

I trying to use the jQuery validate in modal but this doesn't work or don't call the action to validate the inputs.

this is my from into the modal, this are into a template name="modalregistro"

<form id="formregister" class="p-t-15 formregister" role="form" method="get">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group form-group-default">
                <label>Correo electrónico</label>
                <input type="text" name="uname" placeholder="[email protected]" class="form-control" required>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>Contraseña</label>
                <input type="password" id="setPassword" name="user[password]" placeholder="Minimo de 8 Carácteres" class="form-control" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>Validar contraseña</label>
                <input type="password" name="user[password_confirmation]" placeholder="Minimo de 8 Carácteres" class="form-control" required>
            </div>
        </div>
    </div>
    <div class="row m-t-10">
        <div class="col-md-6">
            <p>Estoy de acuerdo con <a href="#" class="text-info small"><strong>TP Landings</strong>, terminos y condiciones de uso</a> y su <a href="#" class="text-info small">Privacidad</a>.</p>
        </div>
        <div class="col-md-6 text-right">
            <a href="#" class="text-info small">¿Ayuda? Contactar el soporte</a>
        </div>
    </div>
    <hr class="b-dashed b-grey">
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <button data-dismiss="modal" class="btn btn-default btn-lg btn-large btn-block text-uppercase">Cancelar</button>
        </div>
        <div class="col-sm-6 col-xs-12">
            <button id="btnHecho" class="text-uppercase btn btn-primary btn-lg btn-large btn-block btn-cons show-notification" type="submit">Crear cuenta</button>
        </div>
    </div>
</form>

I call this template into my Layout of the website

<template name="website">
    <section class="website">
        {{> navbarWebsite}}
    </section>

    {{> modallogin}}
    {{> modalregistro}}
</template>

and this is my rendered

Template.website.rendered = function(){

    $(function(){
        $('.formregister').validate()
    });

    jQuery('.formregister').validate({
        rules: {
            "user[password]": {
                minlength: 2
            },
            "user[password_confirmation]": {
                minlength: 2,
                equalTo : "#setPassword"
            }
        }
    });
}

the jQuery validate are on, and the website.rendered too but I don't know why validate it.

jquery.validate.js template.modalregistro.js

Upvotes: 0

Views: 57

Answers (1)

Sparky
Sparky

Reputation: 98738

You are calling the .validate() method twice on the same form...

$(function(){
    $('.formregister').validate()
});

jQuery('.formregister').validate({ 
    rules: { ...

.validate() is the initialization method and once called on a particular form, it cannot be called again. All subsequent calls will be ignored. Since your rules are declared from the second instance, they are ignored.

EDIT:

Perhaps you don't realize that you're using a class selector when your form only has an id.

The form only contains an id:

<form id="formregister" ...

But your selector is targeting class="formregister":

$('.formregister')

To select id="formregister", you'll need to use an id selector:

$('#formregister')

Upvotes: 1

Related Questions