javascript - jquery 使用meteorjs 在模态中进行验证

Question

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

这是我进入模式的方式，这是进入模板 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="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只有id时，您可能没有意识到您正在使用class选择器。

表单仅包含一个id:

<form id="formregister" ...

但是您的选择器的目标是class="formregister":

$('.formregister')

要选择 id="formregister"，您需要使用 id 选择器:

$('#formregister')