jquery 使用 meteorjs 在模态中验证

Question

我尝试在模态中使用 jQuery 验证，但这不起作用或不调用操作来验证输入。

这是我的模态，这是模板名称="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="usuario@correo.com" 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>

我将此模板调用到我的网站布局中

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

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

这是我渲染的

Template.website.rendered = function(){

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

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

jQuery 验证开启，website.rendered 开启，但我不知道为什么要验证它。

Answer 1

您在同一表单上两次调用 .validate() 方法...

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

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

.validate() 是初始化方法，一旦在特定的 form 上调用，就不能再次调用。所有后续调用都将被忽略。由于您的规则是从第二个实例声明的，因此它们将被忽略。

编辑:

也许您没有意识到您正在使用 class select 或者当您的 form 只有 id.

form只包含一个id:

<form id="formregister" ...

但是您的 select 或正在定位 class="formregister":

$('.formregister')

至selectid="formregister"，您需要使用idselect或：

$('#formregister')

jquery 使用 meteorjs 在模态中验证

jquery validate in modal with meteorjs

javascript

jquery

jquery-validate

meteor

bootstrap-modal