如何在所有字段都为真后激活注册按钮

时间:2013-07-12 08:14:53

标签: javascript jquery forms

这是我检查字段是真还是假的情况

function textoEnP(){
var idInput2 = $(this).attr("id");

switch(idInput2){
    case "nombre":
    {
        if($(this).val() == ""){
            $(".texto_req_reg").html("No puede estar vacio");
            $(".texto_req_reg").css("color", "#C60");
            nombreValido = false;
        }else{
            $(".texto_req_reg").html("Correcto");
            $(".texto_req_reg").css("color", "#990");
            nombreValido = true;
        }
    break;
    }
    case "apellido":
    {
        if($(this).val() == ""){
            $(".texto_req_reg").html("No puede estar vacio");
            $(".texto_req_reg").css("color", "#C60");
            apellidoValido = false;
        }else{
            $(".texto_req_reg").html("Correcto");
            $(".texto_req_reg").css("color", "#990");
            apellidoValido = true;
        }
    break;
    }
    case "edad":
    {
        if(isNaN($(this).val())){
            $(".texto_req_reg").html("Debe ingresar solo numeros");
            $(".texto_req_reg").css("color", "#C60");
            edadValida = false;
        }else if($(this).val() == ""){
            $(".texto_req_reg").html("No puede estar vacio");
            $(".texto_req_reg").css("color", "#C60");
            edadValida = false;
        }else{
            $(".texto_req_reg").html("Correcto");
            $(".texto_req_reg").css("color", "#990");
            edadValida = true;
        }
    break;
    }
    case "mail":
    {
        if($(this).val().length < 9 && isNaN($(this).val())){
            $(".texto_req_reg").html("Debe usar un formato valido");
            $(".texto_req_reg").css("color", "#C60");
            mailValido = false;
        }else if($(this).val() == ""){
            $(".texto_req_reg").html("No puede estar vacio");
            $(".texto_req_reg").css("color", "#C60");
            mailValido = false;
        }else{
            $(".texto_req_reg").html("Correcto");
            $(".texto_req_reg").css("color", "#990");
            mailValido = true;
        }
    break;
    }
    case "contraseña":
    {
        password = $(this).val();
        if($(this).val().length < 9){
            $(".texto_req_reg").html("Debe tener más de 8 caracteres");
            $(".texto_req_reg").css("color", "#C60");
        }else{
            $(".texto_req_reg").html("Correcto");
            $(".texto_req_reg").css("color", "#990");
            contraseñaValida = true;
        }
    break;
    }
    case "repetir_contraseña":
    {
        if($(this).val() !== password){
            $(".texto_req_reg").html("Debe coincidir con su contraseña");
            $(".texto_req_reg").css("color", "#C60");
        }else{
            $(".texto_req_reg").html("Correcto");
            $(".texto_req_reg").css("color", "#990");
            repContraseñaValida = true;
        }
    break;
    }
    if($("#checkbox_legales").is(":checked")){
    checkbox_legalesValido = true;
}else{
    checkbox_legalesValido = false;
    }
    habilitarBoton();
}

}

如果一切正常,这是激活注册按钮的功能

function habilitarBoton(){
if(nombreValido && apellidoValido && edadValido && mailValido && contraseñaValida && repContraseñaValida && checkbox_legalesValido)
{
    $("#registrarse").removeAttr("disabled").css('background-color', '#fff');;
}else{
    $("#registrarse").attr("disabled", "disabled").css({'background-color' : '#ccc', 'color' : '#000'});
}   

}

主要问题是复选框的条件,不工作不知道原因,直到我弄明白,我的表格才会起作用。有什么建议吗?

修改:这是HTML

    <div id="cuadro_izq">
        <form>
            <div class="titulo_loguearse">
                LOGUEARSE
            </div>
            <div id="form_loguearse">
                 <div class="renglon">
                    <label for="tex1" class="loguin_label">Mail:</label>
                    <INPUT type="text" NAME="mail" id="tex1" class="loguin_field"><br />
                 </div>
                 <div class="renglon">
                    <label for="tex2" class="loguin_label">Contraseña:</label>
                    <INPUT TYPE="password" NAME="contrasena" id="tex2" class="loguin_field">
                 </div>
            </div>
            <div id="boton_loguin">
                <input type="submit" value="Entrar" id="entrar" />
            </div>
        </form>
    </div>
    <div id="cuadro_der">
        <form>
            <div class="titulo_loguearse">
                REGISTRARSE
            </div>
            <div id="form_registro">
                <div class="renglon">
                    <label for="tex3" class="loguin_label">Nombre:</label>
                    <INPUT type="text" NAME="nombre" id="nombre" class="registro_field"><br />
                    <div id="caja_req_reg_nom">
                    </div>
                </div>
                <div class="renglon">
                    <label for="tex4" class="loguin_label">Apellido:</label>
                    <INPUT TYPE="text" NAME="apellido" id="apellido" class="registro_field"><br />
                    <div id="caja_req_reg_ape">
                    </div>
                </div>
                <div class="renglon">
                    <label for="tex5" class="loguin_label">Edad:</label>
                    <INPUT type="text" NAME="edad" id="edad" class="registro_field"><br />
                    <div id="caja_req_reg_edad">
                    </div>
                </div>
                <div class="renglon">
                    <label for="tex6" class="loguin_label">Mail:</label>
                    <INPUT TYPE="text" NAME="mail" id="mail" class="registro_field"><br />
                    <div id="caja_req_reg_mail">
                    </div>
                </div>
                <div class="renglon">
                    <label for="tex7" class="loguin_label">Contraseña:</label>
                    <INPUT type="password" NAME="contraseña" id="contraseña" class="registro_field"><br />
                    <div id="caja_req_reg_pass">
                    </div>
                </div>
                <div class="renglon">
                    <label for="tex8" class="loguin_label">Repetir contraseña:</label>
                    <INPUT TYPE="password" NAME="repetir_contraseña" id="repetir_contraseña" class="registro_field"><br />
                    <div id="caja_req_reg_repass">
                        <!--<p class="texto_req_reg">Texto prueba</p>-->
                    </div>
                </div>
                <div class="renglon" id="renglon_legales">
                    <INPUT TYPE="checkbox" NAME="aceptar_legal" id="checkbox_legales">
                    <label for="tex9" id="legales_label">Acepto las disposiciones legales</label><br />
                </div>
            </div>
            <div id="boton_registrarse">
                <input type="submit" value="Registrarse" id="registrarse" disabled="disabled" />
            </div>
        </form>
    </div>

2 个答案:

答案 0 :(得分:0)

if($("#checkbox_legales").prop(":checked"))

更多信息

http://christierney.com/2011/05/06/understanding-jquery-1-6s-dom-attribute-and-properties/

答案 1 :(得分:0)

idInput2

仅匹配1 case,因此未达到所有其他条件。 因此,如果您调用该函数一次,则只有一个验证成功,如果您为每次验证调用它,您可能希望将调用移出该函数的habilitarBoton()

相关问题