带有动态对话框消息的 Jquery UI 对话框属性

Question

我有一个包含一些 asp.net texboxes/dropdownlists/radiobuttonlists 等的表单，当我单击提交时，我有一个 onclientclick 事件，它对所有控件进行验证检查。我想将 Jquery UI 对话框用于错误弹出窗口，但我需要为每个表单元素验证提供不同的消息。这就是我现在正在做的事情，它可以工作，但是样式 valign 不起作用，当我以这种方式声明它时，我不确定如何操作对话框的属性。我有 C++ 的背景，所以我对客户端脚本还是很陌生。

        if (Page_ClientValidate())
        {
            var newDiv = $(document.createElement('div'));
            newDiv.attr("title", "Required Field");
            newDiv.attr("style", "vertical-align:top");

            if ($("#txtFirstName").val() == "") {
                $("#txtFirstName").focus();
                newDiv.html('Please enter your first name');
                newDiv.dialog();
                return false;
            }

Answer 1

使用您的代码进行测试似乎会显示一个按预期显示的对话框 - 标题栏中的标题，下方的消息。您是否包含相关的 jquery UI css 参考？

如果您想进行更详细的样式设置，只需在您的 html 中包含类标签（即“请输入您的名字”），您可以像往常一样在您的 css 中为该类设置样式。

function validate() {
  var newDiv = $(document.createElement('div'));
  newDiv.attr("title", "Required Field");

  if ($("#txtFirstName").val() == "") {
    $("#txtFirstName").focus();
    newDiv.html('Please enter your first name');
    newDiv.dialog({
  position: { my: "center top", at: "center top", of: window }
});
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<input type="textbox" name="txtFirstName" id="txtFirstName" />
<button onclick="validate();return false;">Validate</button>