jQuery对话框内的textArea

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

在提交之前，请按班级检查文本区域是否有价值。

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

Answer 2

您可以通过在html()内添加textarea标签html()如下所示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

好吧...只要在#dialog里面放一个<textarea> ：

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

提交表格后应进行验证：

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

Answer 4

jQuery UI将以模态形式显示您在#dialog放置的文本/ html

 $(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>