mario.cotom
Enviado por mario.cotom el Vie, 18/01/2019 - 12:16

En esta forma veremos como validar si los campos están vacios, no se habilitara el boton enviar, pero si se llenan los campos se halitará el boton enviar, esto solo es una referencia para principiantes, actualmente se recomienda utilizar librerias como Bootstrap, AlertifyJs, etc.

js

 

$(document).ready(function () {
 
 
/*En todo momento nuestro boton estara desabilitado hasta que las condiciones de abajo se cumplan*/
 
$('#butonsubmit').attr('disabled', true);
 
/*Comenzamos declarando nuestra funcion para iniciar con nuestra validacion */
    function verificar(){
 
        // e.preventDefault();
        var name, email, phone, comments; /* Declaramos nuestra variables*/
 
        name = $('#name').val().trim(); /* llamamos a nuestras variables y usamos el # del input con trim() para eliminar espacios de mas en nuestros campos */
        email = $('#email').val().trim();
        phone = $('#phone').val().trim();
        comments = $('#comments').val().trim();
 
        var completo = 1;
 
        /* ****** Name******* */
 
        if (name.length < 1) {/* verificamos si el campo esta vacio*/
            $('#mnombre').fadeIn();/*hacemos aparecer el mensjae de un span en el html con el mensaje de obligacion*/
            $('#name').addClass('fieldempty');
            completo = 0;
            return false;
        } else {
            $('#mnombre').fadeOut(); /*desaparecemos el mensjae de un span en el html con el mensaje de obligacion*/
            $('#name').removeClass('fieldempty').addClass('fieldfull');
        }
 
        /* ****** Email ******* */
 
        if (email.length < 1) {
            $('#memail').fadeIn();
            $('#email').addClass('fieldempty');
            completo = 0;
            return false;
        } else {
            $('#memail').fadeOut();
            $('#email').removeClass('fieldempty').addClass('fieldfull');
        }
 
        /* ****** Phone ******* */
 
        if (phone.length < 1) {
            $('#mphone').fadeIn();
            $('#phone').addClass('fieldempty').on('input', function () {
                this.value = this.value.replace(/[^0-9]/g, '');
            });
            completo = 0;
            return false;
        } else {
            $('#mphone').fadeOut();
            $('#phone').removeClass('fieldempty').addClass('fieldfull');
        }
 
        /* ****** Comments ******* */
 
        if (comments.length < 1) {
            $('#mmenssage').fadeIn();
            $('#comments').addClass('fieldempty');
            completo = 0;
            return false;
        } else {
            $('#mmenssage').fadeOut();
            $('#comments').removeClass('fieldempty').addClass('fieldfull');
 
        }
 
        if(completo == 1) {
            $('#butonsubmit').attr('disabled', false);
            }else{
            $('#butonsubmit').attr('disabled', true);
        }   
 
    }
 
    /******************Changes********************/
 
        $('#name').change(function () {/* el change es una funcion de camio en jquery*/
            verificar(); /* llamamos a nuestra funcion para verificar lo anterior validado*/
            if((name.length) == verificar()) { /* Verificamos si el campos esta vacio que se cumpla la condicion*/
                $('#butonsubmit').attr('disabled', true);/* desabilitamos el boton si esta vacio el campo*/
                $('#name').removeClass('fieldfull');
                return false;       
            }else {
                $('#butonsubmit').attr('disabled', false);/*Si el boton vuelve a ser llenado habilitamos el boton*/
            }  
 
        });/****End***name***********/
 
        $('#email').change(function () {
            verificar();  
            if((email.length < 1) == verificar()) {
                $('#butonsubmit').attr('disabled', true);
                $('#email').removeClass('fieldfull');
                return false;       
            }else {
                $('#butonsubmit').attr('disabled', false);
            } 
        });/****End***email***********/
 
        $('#phone').change(function () {
            verificar();
 
            if((phone.length < 1) == verificar()) {
                $('#butonsubmit').attr('disabled', true);
                $('#phone').removeClass('fieldfull');
                return false;       
            }else {
                $('#butonsubmit').attr('disabled', false);
            } 
        });/****End***phone***********/
 
 
        $('#comments').change(function () {
             verificar();
 
            if((comments.length < 1) == verificar()) {
                $('#butonsubmit').attr('disabled', true); 
                $('#comments').removeClass('fieldfull');
                return false;       
            }else {
                $('#butonsubmit').attr('disabled', false);
            } 
 
        });/****End***commets***********/
 
});