Jquery UI Dialog验证问题

时间:2015-05-10 03:58:15

标签: javascript jquery validation jquery-ui

我来自阿根廷,我的名字是塞巴斯蒂安。

我年轻的发展学生,我试图为我的妻子做一个dinamic网站。

这是(目前)只是一种股票管理。

我应用Jquery UI Dialog为它提供样式和动画,但我有一些验证问题。对不起,如果我的英语表达很难理解的话。

现在你会告诉我我的代码。

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

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

我为每个表单创建了一个div,因为它正在思考所有类似于UI dinamic对话框。

验证的模式在HTML表单中是明确的,但UI对话框不理解这一点,我不知道为什么...

拜托,任何解决方案都非常被我接受和高兴。

我知道UI Dialog在使用这种验证模式时遇到了什么问题,或者这与她的拥有者有关。在这种情况下,我需要知道如何将UI Dialog验证模式设置为我的表单。

Y需要为具有两位小数的正数制作模式。

抱歉,感谢您的帮助。我在等待并试图解决这个问题。

1 个答案:

答案 0 :(得分:0)

好的...

我解决了它。

我正在使用类型=&#34;数字&#34;对于文本框,数字在html5中。

更改类型=&#34;文字&#34;并设置你想要的模式,验证是完美的,就像我想要的那样。

对于我看到这个问题的每个人,可能就是答案。

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