0

Soy nueva con jquery. Tengo un formulario, que me sirve para dar de alta, ya tengo la funcionalidad lo que pretendo lograr es darle formato al formulario en su validación como por ejemplo, facebook cuando la contraseña es incorrecta marca el cuadro de texto de rojo y agrega un span sobre el inputText.

introducir la descripción de la imagen aquí

Éste es mi código HTML

    <div id="detailsDialog" class="box-primary" title="Alta de ubicación" style="border-radius:3px" hidden="hidden">
                <form id="detailsForm" class="form-group">

                    <div class="details-form-field">

                        <label for="ubicacion">Ubicación:</label>

                        <input id="txtUbicacion" name="txtUbicacion" type="text" class="form-control" style="text-transform:uppercase" />
                    </div>
                    <div class="details-form-field">
                        <label for="sucursal">Sucursal:</label>
                        <input id="txtSucursal" name="txtSucursal" type="text" class="form-control" />

                    </div>
                </form>
                <div class="col-xs-12"></div>
                <div class="col-xs-8" style="margin-top: 10px"></div>
                <div class="form-group col-xs-2" style="margin-top: 10px">
                    <button type="button" id="btnAdd" class="btn btn-primary" onclick="altaUbicacion()">Agregar</button>
                </div>
            </div>

Aquí mi función (la única validación que requiero es que los campos no estén vacíos al dar clic sobre el boton "btnAdd")

    function altaUbicacion() {
    if ($('#txtUbicacion').val() == '' || $('#txtSucursal').val() == '')
    {

         alert('Debe llenar todos los campos');
    }
    else
        {
    $("#detailsDialog").dialog("close");
    alertify.confirm('Aviso', '¿Está seguro de proceder?', function () {

        $.ajax({
            type: "POST",
            url: 'Alta?ubicacion=' + $('#txtUbicacion').val() + '&sucursal=' + $('#txtSucursal').val(),
            success: function (msj) {
                debugger;

                if (msj.Result === 'OK') {

                    alertify.alert('<img src="/Images/exito.png" height="40" width="40"> ' + msj.mensaje, function () { consulta(); });
                }
                else {

                    alertify.alert('<img src="/Images/error2.jpg" height="40" width="40"> ' + msj.mensaje, function () { consulta(); });

                }

            }
        });
    }
    , function () {
        alertify.error('Proceso cancelado')
    });
    }
}

Estaré muy agradecida si alguien puede apoyarme, saludos.

6
  • La respuesta puede ir desde validaciones hechas a mano, hasta plugins como jQuery validate, es demasiado amplia la pregunta porque muchos te darán distintas formas de hacerlo
    – Yikarus
    el 26 ene. 2018 a las 18:50
  • cada input se valida diferente por ejemplo si te piden nombre(s) tienes qu validar que sean solo puras letras el tamaño maximo que le daras de caracteres. por lo que veo tu pides validaciones en cuanto diseño el 26 ene. 2018 a las 19:30
  • Hola, la única validación que requiero es que las cajas no estén vacías al dar clic sobre el botón "btnAdd" (: @CarlosEnriqueGilGil
    – masha10
    el 26 ene. 2018 a las 19:36
  • @masha10 yo usaria la validación de html5 required <input type="text" name="usrname" required> asi el 26 ene. 2018 a las 19:39
  • con required te marca en rojo el campo si esta vacio , hasta que lo llenes te deja avanzar el boton. el 26 ene. 2018 a las 19:45

2 respuestas 2

0

Esta función verifica si los input estan vacios o si las option de los select estan en value '%' que es el value donde le doi "[Seleccione]"

function validarControleslmL() {
    var v = 0;
    /*input*/
    for (var i = 0; i < $('input:text').length; i++) {
        var id_txt = $('input:text')[i].id;
        if ($('#' + id_txt + '').val() == '' && !$('#' + id_txt + '').is(":hidden") && !$('#' + id_txt + '').is(':disabled')) {
            debugger;
            $('#' + id_txt + '').css("border", "1px solid");
            $('#' + id_txt + '').css("border-color", "blue");
            v++;
           } else {
            $('#' + id_txt + '').css("border", "");
            $('#' + id_txt + '').css("border-color", "");
            }
    }
    console.log('validarControleslmL:Textbox:' + v);
    /*Select*/
    var c = 0;
    for (var e = 0; e < $('select').length; e++) {
        var id_txt = $('select')[e].id;
        if ($('#' + id_txt + '').val() == '%' || $('#' + id_txt + '').val() == '-1') {
            debugger;
            $('#' + id_txt + '').css("border", "1px solid");
            $('#' + id_txt + '').css("border-color", "blue");
            c++;
        } else {
            $('#' + id_txt + '').css("border", "");
            $('#' + id_txt + '').css("border-color", "");
        }
    }
    console.log('validarControleslmL:select :' + c);
    if (v+c > 0) {
        alert("Faltan ingresar datos en los campos resaltados");
        return false;
    } else { return true;}
    console.log(v+c);
}

texto destacado

0

aqui esta un ejemplo

function checkCampos(obj) {
var camposRellenados = true;
obj.find("input").each(function() {
var $this = $(this);
        if( $this.val().length <= 0 ) {
            camposRellenados = false;
            return false;
        }
});
if(camposRellenados == false) {
    return false;
}
else {
    return true;
}

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.