Javascript jQueryUI对话框验证问题

我来自阿根廷，我的名字叫塞巴斯蒂安

我是一个年轻的学生，我想为我妻子的生意建立一个迪纳米克网站

这（目前）只是一个库存管理

我应用jQueryUI对话框给它一个样式和动画，但我有一些验证问题。如果我的英语表达很难理解，我很抱歉

现在y将向您展示我的代码

<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+"'");
    });
});

$（文档）.ready（函数（）{
/*莫斯特拉尔现实生产部*/
$（“#btnactualizar_producto”）。单击（函数（事件）{
$（“实现产品”）.css（“显示”、“块”）；
$（“#Ingrear_producto_nuevo”）.css（“显示”、“无”）；
$（“#Ingrear_compra”）.css（“显示”、“无”）；
});
$（“#btnnuevo_producto”）。单击（函数（事件）{
$（“#Ingrear_producto_nuevo”）.css（“显示”、“块”）；
$（“实现产品”）.css（“显示”、“无”）；
$（“入口压缩”）对话框（“关闭”）；
$（“Ingrear#u producto_nuevo”）。对话框（{muestra la ventana-->
宽度：“500”，安可·德拉文塔纳-->
高度：“125”，阿尔图拉·德拉文塔纳-->
节目：“规模”，动物世界-->
隐藏：“规模”，动物界
可调整大小：“假”，fija o可重定尺寸si ponemos este valor a“真”->
位置：“中间”，位于pantalla的ventana位置（左、上、右…）
情态：“真实”是指真实的网络内容，它是一种活动（非常优雅）——>
});
});
/*莫斯特拉尔市安格拉尔区*/
$（“#btningresar_compra”）。单击（函数（事件）{
$（“#Ingrear_compra”）.css（“显示”、“块”）；
$（“实现产品”）.css（“显示”、“无”）；
$（“#Ingrear_producto_nuevo”）.css（“显示”、“无”）；
$（“#Ingrear_compra”）。对话框（{muestra la ventana-->
宽度：“320”，安可·德拉文塔纳-->
高度：“100”，阿尔图拉·德拉文塔纳-->
节目：“规模”，动物世界-->
隐藏：“规模”，动物界
可调整大小：“假”，fija o可重定尺寸si ponemos este valor a“真”->
位置：“中间”，位于pantalla的ventana位置（左、上、右…）
情态：“真实”是指真实的网络内容，它是一种活动（非常优雅）——>
});
});
$（“#btnproducto_existente”）。单击（函数（evento）{
$（“现有产品”）.css（“显示”、“块”）；
$（“实现产品”）.css（“显示”、“无”）；
$（“入口压缩”）对话框（“关闭”）；
$（“现有产品”）对话框（{muestra la ventana-->
宽度：“500”，安可·德拉文塔纳-->
高度：“125”，阿尔图拉·德拉文塔纳-->
节目：“规模”，动物世界-->
隐藏：“规模”，动物界
可调整大小：“假”，fija o可重定尺寸si ponemos este valor a“真”->
位置：“中间”，位于pantalla的ventana位置（左、上、右…）
情态：“真实”是指真实的网络内容，它是一种活动（非常优雅）——>
});
});
$（“#列表框_nombre”）.change（函数（evento）{
$id_temp=“”；
$id=“”；
var$id_temp=$（“#列表框_nombre”）.find（'：selected'）.val（）；
$id=encodeURIComponent（$id\u temp）；
$（“#listbox_colores”）.load（“pedir_colores.php？prod=”+$id+“”）；
});
});

"

风格：

<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> '

.ui对话框.ui小部件内容
{  
颜色：#FFFFFF；
字体大小：12px；
}  
/*卡贝塞拉角酒店
.ui对话框.ui小部件标题
{  
背景:#FFFF33；
}  
/*卡贝塞拉地区的柬埔寨人、富恩特地区的塔马诺人、富恩特地区的颜色……*/
.ui对话框.ui对话框标题栏
{  
颜色：#FFFFF；
字体系列：arial；
字体大小：13px；
}  
孔泰多先生{
宽度：460px；
保证金：10美元；
}
文塔纳先生{
显示：无；这是重要的视力检查-->
颜色：#808080；
线高：8px；
字号：8px；
文本对齐：对齐；
}
.tb_颜色{
宽度：50；
}
.tb_比索{
宽度：50；
}
.tb_precio{
宽度：55；
}
'

和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>

好的

我解决了它

我在文本框中使用type=“number”，而数字在html5中是不存在的

将其更改为type=“text”并设置您想要的模式验证就像我想要的那样完美

对于我看到的每个人来说，这个问题的答案可能就在这里

3个小时试图找到解决方案。。。我面前有三把钥匙