Question

如何在对话框中创建文本区域，并且该文本区域应该是使用jQuery UI创建的必填字段。下面是我在对话框中创建提交和关闭按钮的代码，但是当用户通过该代码单击提交按钮时，无法创建应该是必填字段的文本区域。请建议。请找到工作样本http://jsfiddle.net/M4QM6/34/。

    function showDialog1(){
        $("#dialog").html("");
        $("#dialog").dialog("option", "title", "Loading....").dialog("open");
        $("span.ui-dialog-title").text('title here'); 
        $("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            width:"350",
            height:300,
            modal: true,
            buttons: {
                "Submit": function() {
                    $(this).dialog("close");
                }
            }
        });
    }

感谢。

Answer 1

在$("#dialog").("html")之后插入;下列： $("#dialog").append('<textarea class="mandatory"></textarea>');

在你提交之前，请检查他的班级的textarea是否有价值。

if($(".mandatory").text().lenght>0) {
// do submit
} else {
// show error message(eg. Mesaage must       not be empty)
}

Answer 2

您可以在textarea内添加html()标记，如下所示

Dialog1<input type="submit" value="dialog1" onclick="return showDialog1()"/>
<div id="dialog"></div>
<br>
    <script>
                function showDialog1(){
        $("#dialog").html("<textarea name="testArea" required cols='5' rows='3'>your text here</textarea>");
            $("#dialog").dialog("option", "title", "Loading....").dialog("open");
            $("span.ui-dialog-title").text('title here'); 
            $("#dialog").dialog({
                autoOpen: false,
                resizable: true,
                width:"350",
                height:300,
                modal: true,
                buttons: {
                    "Close": function() {
                        $(this).dialog("close");
                    }
                }
            });
        }
    </script>

您可以通过添加required属性

将其设为必填字段

请参阅此处更新的Jsfiddle

Answer 3

嗯......只需在<textarea>内加#dialog：

$("#dialog").html("<textarea id="myarea" />");

应在提交表格后进行验证：

$('form').submit(function(event) {
    if ($("#myarea").text() === "" ) {
        event.preventDefault();
    }
});

Answer 4

jQuery UI将在模式中显示您放入的文本/ html #dialog

$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        resizable: true,
        width: "350",
        height: 300,
        modal: true,
        buttons: {
            "Close": function () {
                // if textarea is not empty close the modal and do something with the value
                if ($(this).find('textarea').val().length) $(this).dialog("close");
                else $(this).find('textarea').css({borderColor: 'red'});
            }
        }
    });
});

function showDialog1() {
    $('#dialog').find('textarea').val(''); // clear textarea on modal open
    $("#dialog").dialog("option", "title", "Loading....").dialog("open");
    $("span.ui-dialog-title").text('title here');
}

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

Dialog1
<input type="submit" value="dialog1" onclick="return showDialog1()" />
<div id="dialog">
    <p>
        <textarea></textarea>
    </p>
</div>
<br>

textArea在jquery对话框中

4 个答案: