带有验证的已启用/已禁用按钮

时间:2019-07-04 10:00:10

标签: javascript jquery jsp

我有一个带有两个空字段(密码,newPassword)和长度验证(7个字符),大写,小写,数字的表单。

我已经开发了测试,并且在激活验证时无法启用“重置密码”按钮。该按钮仍然处于锁定状态。

我认为错误可能出在isValid中,并且没有出现适当的参数。

我的表单:enter image description here

我的JSP代码:

div class="form-group has-feedback">
                        <input class="form-control passwordField" type="password" name="newPassword" id="newPassword" autocomplete="off" 
                            placeholder="<fmt:message key="es.sanitas.gid.enter.credentials.new.password.placehoder"/>" 
                            required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"/>
                        <i class="material-icons md-18 form-control-feedback">lock</i>
                    </div>
                    <div id="passwordRules"></div>
                    <div class="form-group has-feedback" >
                        <input class="form-control passwordField" type="password" name="newPasswordConfirm" id="newPasswordConfirm" autocomplete="off" 
                            placeholder="<fmt:message key="es.sanitas.gid.enter.credentials.confirm.password.placehoder"/>" 
                            required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"/>
                         <i class="material-icons md-18 form-control-feedback">lock</i>
                    </div>
                    <div class="form-group">
                        <div>
                            <div id=confirm class="error" data-role="password-rule" >Las contraseñas deben coincidir</div>                                                  
                            <div id=length class="error" data-role="password-rule">La contraseña debe tener al menos 8 caracteres</div>                         
                            <div id=alphanumeric class="error" data-role="password-rule">Al menos se requiere 1 caracter alfanumérico</div>
                            <div id=numbers class="error" data-role="password-rule">Al menos se requiere 1 caracter numérico</div>
                            <div id=uppercase class="error" data-role="password-rule">Al menos se requiere 1 caracter en mayúsculas</div>
                            <div id=lowercase class="error" data-role="password-rule">Al menos se requiere 1 caracter en minúsculas</div>
                        </div>
                    </div>
<!--                    <div class="form-group-btn"> -->
                    <div class="form-group">
                        <div class="loginBtn">
                            <input id="submit" type="submit" class="btn btn-primary btn-md btn-block btn-flat"  value="<fmt:message key="es.sanitas.gid.restore"/>" disabled/>
                        </div>
                    </div>

我的JS代码:

$(document).ready(function() {

    var filtros = [/[a-zA-Z0-9]/, /[A-Z]/, /[a-z]/, /\d/]
    var tags = ['#alphanumeric', '#uppercase', '#lowercase', '#numbers']
    var msgs = ["Al menos se requiere 1 caracter alfanumérico",
                "Al menos se requiere 1 caracter en mayúsculas",
                "Al menos se requiere 1 caracter en minúsculas",                                
                "Al menos se requiere 1 caracter numérico"
                ]
    var btn=0   
    var pswd=0
    var conf=0
    var minLength="La contraseña debe tener al menos 8 caracteres"
    var pwdEquals="Las contraseñas deben coincidir"

    $('#newPassword').keyup(function() {
        pswd = $(this).val();
        checkAllRules(pswd);
        var isValid=checkAllRules(pswd);
        if(isValid){
            $("#submit").attr("disabled",false);
        }

    }); 

    $('#newPasswordConfirm').keyup(function() {
        conf = $(this).val();
        checkEquals(pswd,conf);
    });


    function checkAllRules (pswd){

        if (pswd.length > 7 ) {
            pwdRuleOK('#length', minLength)
        } else {
            pwdRuleNOK('#length', minLength)
        }

        for (i = 0; i < filtros.length; i++) { 

            if (pswd.match(filtros[i])) {
                pwdRuleOK(tags[i], msgs[i]);
            } else {
                pwdRuleNOK(tags[i], msgs[i]);
            }

        }       

    }

    function pwdRuleOK(idTag, mensaje){
        $(idTag).empty().removeClass("error").addClass("successCls").append('<i class="material-icons md-18 padding-6" style="">check_circle</i>'+mensaje);

    }

    function pwdRuleNOK(idTag, mensaje){
        $(idTag).empty().removeClass("successCls").addClass("error").append(mensaje);
    }

0 个答案:

没有答案