Untitled

<!DOCTYPE html>

<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="js/grid.js" type="text/javascript"></script>
<link   href="css/grid.css" rel="stylesheet" type="text/css">
<script src="js/dialog.js" type="text/javascript"></script>
<link   href="css/dialog.css" rel="stylesheet" type="text/css">
<script src="js/draggable.js" type="text/javascript"></script>
<script type="text/javascript" src="js/valida.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/estilo.css" media="screen" />

<table border="0" class="tablePopup">
                    <tr>
                        <td width="80">Cantidad</td>
                        <td width="160">Unidad de Medida</td>
                        <td>Condición</td>
                        <td>Activo Fijo</td>
                    </tr>
                    <tr>

                        <td>
                            <input type="text" id ="Cantidad" name="Cantidad"  class="solo-numero" maxlength="2" required>
                        </td>
                        <td>
                        <select id ="unidadMedida" required><option  value="" >Seleccione...</option>
                                          <option  value="litros">Litros</option>
                                          <option  value="kilos">Kilos</option>
                                          <option  value="bulto">Bulto</option>
                                          <option  value="lote">Lote</option>
                                          <option  value="equipo">Equipo</option>
                                          <option  value="piezas">Piezas</option>
                                          <option  value="unidad">Unidad</option>
                        </td>

                        <td>
                        <select id ="condicion" required><option  value="">Seleccione...</option>
                                          <option  value="Bueno">Bueno</option>
                                          <option  value="Malo">Malo</option>
                                          <option  value="Regular">Regular</option>
                        </td>
                        <td>
                        <input type="radio"  name="activoFijo" value="Si" >Si
                        <input type="radio"  name="activoFijo" value="No" >No
                        </td>
                    </tr>
                    <tr>
                        <td>Descripción</td>
                    </tr>
                    <tr>
                        <td scope="colgroup" colspan="4"><textarea cols="65" maxlength="1500" id="descripcion">ewdd</textarea></td>
                    </tr>
                  </table>
                  <table border="0" class="tablaButton">
                      <tr>
                        <td></td>
                        <td></td>
                        <td><button type="button" id="btnSave" class="btn btn-default">Save</button></td>
                        <td width="80"><button type="button" id="btnCancel" class="btn btn-default">Cancel</button></td>
                    </tr>
                  </table>
                </form>
            </div>

     </td>
 </tr>

$(document).ready(function () {
var data, grid, dialog;
data = [];

 dialog = $('#dialog').dialog({
    title: 'Agregar/Editar',
    autoOpen: false,
    resizable: false,
    height:250,
    width:600,
    modal: true
});
function Edit(e) {
    $('#Item').val(e.data.id);
    $('#Cantidad').val(e.data.record.Cantidad);
    $('#unidadMedida').val(e.data.record.unidadMedida);
    $('#descripcion').val(e.data.record.descripcion);
    $('#condicion').val(e.data.record.condicion);
    $('#activoFijo').val(e.data.record.activoFijo);
    $('#dialog').dialog('open');
    $('#button').show();
}
function Delete(e) {
    if (confirm('¿esta seguro que desea eliminar este registro?')) {
        grid.removeRow(e.data.id);
        if(grid.count()!=0){
            $('#button').show();
        }else{
            $('#button').hide();
        }
    }
}
function Save() {

    if ($('#Item').val()) {
        var id = parseInt($('#Item').val());
        grid.updateRow(id, { 'Item': id, 'Cantidad': $('#Cantidad').val(), 'unidadMedida': $('#unidadMedida').val(), 'descripcion' : $('#descripcion').val(), 'condicion' : $('#condicion').val(), 'activoFijo' : $('#activoFijo').val() });
    } else {
        grid.addRow({ 'Item': grid.count() + 1, 'Cantidad': $('#Cantidad').val(), 'unidadMedida': $('#unidadMedida').val(), 'descripcion' : $('#descripcion').val(), 'condicion' : $('#condicion').val(), 'activoFijo' : $('#activoFijo').val() });
    console.log($('#Cantidad').val());
    console.log($('#activoFijo').val());
    }
    dialog.close();
    $('#button').show();
}

grid = $('#grid').grid({
    dataSource: data,
    columns: [
        { field: 'Item', width: 32 },
        { field: 'Cantidad' },
        { field: 'unidadMedida', title: 'Unidad de Medida' },
        { field: 'descripcion', title: 'Descripcion' },
        { field: 'condicion', title: 'Condicion'},
        { field: 'activoFijo', title: 'Activo Fijo (si-no)'},
        { width: 50, tmpl: '<a href="#"><img src="img/editar.png"></a>', align: 'center', events: { 'click': Edit } },
        { width: 50, tmpl: '<a href="#"><img src="img/eliminar.png"></a>', align: 'center', events: { 'click': Delete } }
    ]

});
$('#btnAdd').on('click', function () {
    $('#Item').val('');
    $('#Cantidad').val('');
    $('#unidadMedida').val('');
    $('#descripcion').val('');
    $('#condicion').val('');
    $('#activoFijo').val('');
    $('#dialog').dialog('open');
});


$('#btnSave').on('click', function(){
    if(comprobarCamposRequired()){
        Save();
    }else{
        alert("llene todos los campos");
    }

} );

dialog.dialog("close");
});

 $('.solo-numero').keyup(function (){
        this.value = (this.value + '').replace(/[^0-9]/g, '');
      });

 $(function($){
            $.datepicker.regional['es'] = {
                closeText:'Cerrar',
                currentText:'Hoy',
                monthNames:['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort:['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                dayNames:['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                dayNamesShort:['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                dayNamesMin:['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
                weekHeader:'Sm',
                dateFormat:'dd/mm/yy',
                firstDay:1,
                isRTL:false,
                showMonthAfterYear:false,
                yearSuffix:''
            };
    $.datepicker.setDefaults($.datepicker.regional['es']);

});

         $("#fchFecha").datepicker({
              changeMonth: true,
              changeYear: true,
              showOn: "button",
              buttonImage: "img/calendar.gif",
              buttonImageOnly: true,
              showAnim: "drop",
              buttonText: "Selecione una Fecha"
});
         $('#button').hide();

 function comprobarCamposRequired(){
        var correcto=true;
        var campos=$('input[type="text"]:required');
        var select=$('select:required');

        $(campos).each(function() {
            if($(this).val()==''){
                correcto=false;
                $(this).addClass('error');
            }
    });

$(select).each(function() {
        if($(this).val()==''){
            correcto=false;
            $(this).addClass('error');
        }
    });
return correcto;

}

$('input[type="text"]:required').click(function(){
$(this).removeClass('error');
});


var hoy = new Date();
        dia = hoy.getDate();
        mes = ((hoy.getMonth() + 1) < 10 ? '0' : '') + (hoy.getMonth() + 1);
       anio = hoy.getFullYear();