Jquery UI Dialog validation trouble

im from Argentina and my name is Sebastián.

Im young develop student, and i trying to make a dinamic website to my wife business.

This is(for the moment) just a stock managment.

I apply Jquery UI Dialog to give it a style and animation, but i have some validation problems. Im sorry if my english expresions are dificult to understand.

Now y will show you my code.

<script type="text/javascript"> 
$(document).ready(function(){   

    /* Mostrar div de actualizar producto */
    $("#btnactualizar_producto").click(function(evento) {
        $("#actualizar_producto").css("display", "block");
        $("#ingresar_producto_nuevo").css("display", "none");
        $("#ingresar_compra").css("display", "none");
    });

     $("#btnnuevo_producto").click(function(evento) {
        $("#ingresar_producto_nuevo").css("display", "block");
        $("#actualizar_producto").css("display", "none");
        $("#ingresar_compra").dialog("close");
        $("#ingresar_producto_nuevo").dialog({ <!--  ------> muestra la ventana  -->
            width: '500',  <!-- -------------> ancho de la ventana -->
            height: '125',<!--  -------------> altura de la ventana -->
            show: "scale", <!-- -----------> animación de la ventana al aparecer -->
            hide: "scale", <!-- -----------> animación al cerrar la ventana -->
            resizable: "false", <!-- ------> fija o redimensionable si ponemos este valor a "true" -->
            position: "center",<!--  ------> posicion de la ventana en la pantalla (left, top, right...) -->
            modal: "true" <!-- ------------> si esta en true bloquea el contenido de la web mientras la ventana esta activa (muy elegante) -->
        });
    });

    /* Mostrar div de ingresar compra */
    $("#btningresar_compra").click(function(evento) {
        $("#ingresar_compra").css("display", "block");
        $("#actualizar_producto").css("display", "none");
        $("#ingresar_producto_nuevo").css("display", "none");
        $("#ingresar_compra").dialog({ <!--  ------> muestra la ventana  -->
            width: '320',  <!-- -------------> ancho de la ventana -->
            height: '100',<!--  -------------> altura de la ventana -->
            show: "scale", <!-- -----------> animación de la ventana al aparecer -->
            hide: "scale", <!-- -----------> animación al cerrar la ventana -->
            resizable: "false", <!-- ------> fija o redimensionable si ponemos este valor a "true" -->
            position: "center",<!--  ------> posicion de la ventana en la pantalla (left, top, right...) -->
            modal: "true" <!-- ------------> si esta en true bloquea el contenido de la web mientras la ventana esta activa (muy elegante) -->
        });
     });

    $("#btnproducto_existente").click(function(evento) {
        $("#ingresar_producto_existente").css("display", "block");
        $("#actualizar_producto").css("display", "none");
        $("#ingresar_compra").dialog("close");
        $("#ingresar_producto_existente").dialog({ <!--  ------> muestra la ventana  -->
            width: '500',  <!-- -------------> ancho de la ventana -->
            height: '125',<!--  -------------> altura de la ventana -->
            show: "scale", <!-- -----------> animación de la ventana al aparecer -->
            hide: "scale", <!-- -----------> animación al cerrar la ventana -->
            resizable: "false", <!-- ------> fija o redimensionable si ponemos este valor a "true" -->
            position: "center",<!--  ------> posicion de la ventana en la pantalla (left, top, right...) -->
            modal: "true" <!-- ------------> si esta en true bloquea el contenido de la web mientras la ventana esta activa (muy elegante) -->
        });
    });

    $("#listbox_nombre").change(function(evento) {
        $id_temp = "";
        $id = "";
        var $id_temp = $("#listbox_nombre").find(':selected').val();
        $id = encodeURIComponent($id_temp);
        $("#listbox_colores").load("pedir_colores.php?prod='"+$id+"'");
    });
});

'

Style:

<style>
.ui-dialog .ui-widget-content  
{  
color: #FFFFFF;  
font-size: 12px;
}  

/*Para cambiar el fondo de la cabecera*/ 
.ui-dialog .ui-widget-header  
    {  
background: #FFFF33;  
}  

/*Para cambiar el contenido de la cabecera, tamaño de fuente, color de fuente, ...*/ 
.ui-dialog .ui-dialog-titlebar  
{  
color: #FFFFF;  
font-family: arial;
font-size: 13px;
}  

.contenido {
    width:460px;
    margin:10 auto;
}

.ventana{

    display: none;      <!-- -------------------------> es importante     ocultar las ventanas previamente -->
    color:#808080;
    line-height:8px;
    font-size:8px;
    text-align:justify;
}

.tb_color{
    width:50;
}

.tb_peso{
    width:50;
}

.tb_precio{
    width:55;
}
</style> '

And HTML:

<table width="475" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="475" align="center">
        <input type="button" id="btningresar_compra" value="Ingresar compra" align="middle" />
        <input type="button" id="btnactualizar_producto" value="Actualizar producto" align="middle" /></td>
</tr>
</table>

<div id="ingresar_compra" align="center" class="ventana" title="Ingresar compra" style="display: none;">
<table width="300" align="center">
    <tr>
        <td width="300" align="center">
            <input type="button" id="btnnuevo_producto" value="Producto nuevo" align="middle" />
            <input type="button" id="btnproducto_existente" value="Producto existente" align="middle" />
        </td>
    </tr>
</table>
</div>

<div id="ingresar_producto_nuevo" align="center" class="ventana" title="Ingresar producto nuevo" style="display: none;">
<form name="ingresar_producto_nuevo" method="post" action="ingresar_datos.php">
    <table width="460" border="0" id="tabla_producto_nuevo" align="center" cellpadding="2" cellspacing="2">
        <tr align="center" valign="middle">
            <td>
                <input type="text"   id="sndnombre" name="sndnombre" size="20" placeholder="Nombre del producto" value="">
                <input type="number" id="sndcolor" name="sndcolor" size="4" placeholder="Color" value="" required class="tb_color">
                <input type="number" id="sndpeso" name="sndpeso" min="0" step="0,01" size="5" placeholder="Peso" step="0.01" value="" class="tb_peso"
                                required pattern="\d{1,3}\.\d{1,3}">
                <input type="number" id="sndprecio" name="sndprecio" size="3" placeholder="Precio" value=""class="tb_precio"
                                required pattern="\d{1,3}\.\d{1,3}">
            </td>
        </tr>
        <tr align="center" valign="middle">
            <td>
                <input type="submit" align="center" value="Aceptar" />
            </td>
        </tr>
    </table>
</form>
</div>

<div id="ingresar_producto_existente" align="center" class="ventana" title="Ingresar producto existente" style="display: none;">
<form name="ingresar_producto_existente" method="post" action="ingresar_compra.php">
    <table width="460" border="0" align="center" cellpadding="2" cellspacing="2">
        <tr align="center" valign="middle">
            <td>
                <?php
                    #Pedimos la base de datos del stock
                    $nombres = pedir_nombres();

                    #Iniciamos el listbox del nombre producto
                    echo "<select id='listbox_nombre' name='listbox_nombre' size='1'>";
                    echo "<option value='' disabled='disabled' selected='selected'>Seleccionar producto</option>";

                    #Formateamos las opciones de los nombres
                    foreach ($nombres as $index)
                    {
                        echo "<option>".$index."</option>";
                    }

                    #Cerramos el menú
                    echo"</select>";

                ?>

                <select id="listbox_colores" name="listbox_colores" size="1"></select>
                <input type="number" id="nombre_producto_existente" name="agregarpeso" class="tb_peso" placeholder="Peso" step="0.1" value="" required>
            </td>
        </tr>
        <tr align="center" valign="middle">
            <td>
                <input type="submit" align="center" value="Aceptar" />
            </td>
        </tr>
    </table>
</form>
</div>

<div id="actualizar_producto"  align="center" style="display: none;">
<form name="actualizarproducto" method="post" action="actualizar_datos.php">
    <table width="391" border="0" align="center" cellpadding="2" cellspacing="2">
        <tr align="center" valign="middle">
            <td>
                <?php
                    #Pedimos la base de datos del stock
                    $nombres = pedir_nombres();

                    #Iniciamos el listbox del nombre producto
                    echo "<select id='update_nombre' name='update_nombre' size='1'>";
                    echo "<option value='' disabled='disabled' selected='selected'>Seleccionar producto</option>";

                    #Formateamos las opciones de los nombres
                    foreach ($nombres as $index)
                    {
                        echo "<option>".$index."</option>";
                    }

                    #Cerramos el menú
                    echo"</select>";
                ?>
                <input type="number" name="updatecolor" size="4" placeholder="Color" value="" required>
                <input type="number" name="updatepeso" size="5"placeholder="Peso" step="0.01" value="" required>
                <input type="number" name="updateprecio" size="3" placeholder="Precio" value="" required>
            </td>
        </tr>
        <tr align="center" valign="middle">
            <td>
                <input type="submit" align="center" value="Actualizar producto" />
                <input type="button" id="actualizar_cancelar" align="center" value="Cancelar" />
            </td>
        </tr>
    </table>
</form>
</div>

I make a div for each form because was thinking open all like a UI dinamic dialog.

The pattert of the validation is explicit in the HTML form, but UI dialog is not understanding this, i dont know why...

Please, any solution is very very accepted and glad by me.

I reared what UI Dialog have an issue taking this validation patterns, or this remplace with her owns. In this case, im need to know how stablish UI Dialog validation patterns to my forms.

Y need make patterns for positive numbers with two decimals for example.

Sorry and thanks for your help. Im waiting and trying to solve this.