Question

我是Javascript和jQuery的新手。我设法用jQuery创建一个对话框，它在提交之前发出警告。

问题是我不想在警告页面上显示标签和字段，如果它是空的。我无法用PHP执行此操作，因为表单未提交。我需要使用jQuery或Javascript。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>

<script type="text/javascript">
            $(function(){
                // jQuery UI Dialog    
                 $('#dialog').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Submit Form": function() {
                            document.testconfirmJQ.submit();
                        },
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });

                $('form#testconfirmJQ').submit(function(){
                    $("p#dialog-email").html($("input#emailJQ").val());
                    $('#dialog').dialog('open');
                    return false;
                });

</script>

</head>

<body>
<form id="testconfirmJQ" name="testconfirmJQ" method="post">
<fieldset>
<label for="email">E-mail:</label>
<input id="emailJQ" type="text" name="emailJQ" value="" />
<input id="submitJQ" name="submitJQ" type="submit" value="Submit" />
</fieldset>
</form>

<div id="dialog">
<p>E-mail</p>
<p id="dialog-email"></p>
</div>


</body>

Answer 1

您真正需要的是验证。

要重新发明轮子，请查看jQuery Validation

修改

var email = $("input#emailJQ").val(); if (email === "") { $('#dialog-email').addClass('hidden'); }

然后您可以在样式表中定义隐藏的类

.hidden { display:none; }

要隐藏“电子邮件”段落标签，您需要为<p>标记分配一个id，或者更好地将两者包含在带有ID的块元素中，并将该类分配给该元素

Answer 2

好的......我完成了，现在正在运作。

谢谢Lorenzo

再次 - 再次 -

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>

<script type="text/javascript">
            $(function(){
                // jQuery UI Dialog    
                 $('#dialog').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Submit Form": function() {
                            document.testconfirmJQ.submit();
                        },
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });

                $('form#testconfirmJQ').submit(function(){
                    $("p#dialog-email").html($("input#emailJQ").val());

                    if($.trim($("p#dialog-email").val()).length==0)
        {
            $("p#email").hide();
        }
        else
        {
            $("p#email").show();
        }       

                    $('#dialog').dialog('open');

                    return false;
                });

</script>

</head>

<body>
<form id="testconfirmJQ" name="testconfirmJQ" method="post">
<fieldset>
<label for="email">E-mail:</label>
<input id="emailJQ" type="text" name="emailJQ" value="" />
<input id="submitJQ" name="submitJQ" type="submit" value="Submit" />
</fieldset>
</form>

<div id="dialog">
<p id="email">E-mail</p>
<p id="dialog-email"></p>
</div>


</body>

不显示它是否为空，如何使用Javascript或jQuery

2 个答案: