Question

作为jquery ui的学生，我很难找到如何设置对话框按钮进行提交。在输入标签上，我使用type属性允许浏览器执行'email'的验证，对于密码，我使用的是pattern属性和标题。

                <input
                    type="email"
                    name="EMAIL_0000"
                    id="EMAIL_0000"
                    tabindex="12"
                    size="40"
                    placeholder="Username"
                    value=""
                    required/>
                <input
                    type="password"
                    name="PASSWORD_0000"
                    id="PASSWORD_0000"
                    tabindex="13"
                    pattern="<?php echo $PasswordPattern; ?>"
                    value=""
                    placeholder="Password"
                    title="See notes for valid password."
                    required/>

按下提交按钮后，用户将看到如下内容：

我无法发布图片，因为我没有10张声望图片....

您会注意到有两个“登录”按钮。上面一个（在表单区域中）是一个type =“submit”按钮。较低的一个是由jquery ui对话框创建的，如下所示：

    $(“#form_0000”).dialog({
      Var username = $(“#EMAIL_0000”).val(),
      Password=$(“#PASSWORD_0000”).val(),….
      buttons: {
          “Sign On”: function(){
// here I perform a $.ajax() to verify the email is in the data base. But the browser validation does not occur.
…….
    }

当按下较低的“登录”按钮时，不会进行浏览器验证，所有验证都必须在jquery对话框中使用$ .ajax来访问php函数以进行服务器端数据库查询。

根据我的研究，我不相信jQuery UI能够允许设置按钮类型属性。我所能看到的就是设置按钮的名称。

此时我相信我唯一的选择是在表单中设置一个按钮并指示它是一个提交按钮，当按下时，会发生浏览器验证，但是我在验证电子邮件地址的存在方面存在问题，如果密码是（我可以显示一个警告框，但不是我想要的外观和感觉），一旦完成处理就会消失，不允许用户从其他“对话框”按钮中选择一个加入，等等。

是否有人解决了限制问题，可以为解决方案提供一些见解？

我想我可以删除较低的“登录”按钮，只需使用表单提交按钮，并保持浏览器验证和可编程验证过程显示错误消息并保留在对话框屏幕上。我可以将代码移到

$( "#btnSignOn_0000" )
    .click(function() {
        // move dialog 'sign on' button code here.
    });

如果没有必要，我想等待一些回复并避免额外的工作。

Answer 1

哎呀，抱歉引导你走错了路。但是自从我这么做以后，我搞砸了代码，并为你找到了它。

取消注释对话框中的按钮，但不要通过将css设置为：

来显示它

#btnSignOn_0000 {
    display: none;
}

现在，在对话框代码中，而不是$（＆＃39; formSignOn＆＃39;）。submit（）;使用方法：

$("#form_0000").dialog({
      buttons: {
          “Sign On”: function(){
              $('#btnSignOn_0000').click();
          }
      }
});

点击按钮，触发验证，除非表单通过验证，否则不会执行$（＆＃39; formSignOn＆＃39;）。submit（function（）{}）。

Answer 2

以下是最终解决方案：

$('#formSignOn').submit(function( e ){
   e.preventDefault();

这可以防止提交在执行ajax函数后关闭对话框窗口。

Jquery ui对话框按钮提交问题

2 个答案: