在弹出框中提交表单

form submit in popup box

本文关键字：提交 表单      更新时间：2023-09-26

我在弹出框中创建了一个登录表单。当用户名字段为空时，将显示一条错误消息，通知用户填写空的用户名字段。作为一个测试，我点击登录按钮，留下用户名字段，消息如预期那样出现在弹出框中。但问题是弹出框会立即关闭。所以，我的问题是如何保持弹出框打开并显示错误消息？

这是我的脚本：

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Modal Login Window Demo</title>
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="http://designshack.net/tutorialexamples/modal-login-jquery/style.css">
  <script type="text/javascript" src="http://designshack.net/tutorialexamples/modal-login-jquery/js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="http://designshack.net/tutorialexamples/modal-login-jquery/js/jquery.leanModal.min.js"></script>
</head>
<body>
 <div id="w">
    <div id="content">
      <center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a</center>
    </div>
</div>
<div id="loginmodal" style="display:none;">
<?php
if($_POST["loginbtn"]){
    if(!$_POST["username"]){
        echo "<center><font color=red>please fill your username</font></center>";
    }elseif(!$_POST["password"]){
        echo "<center><font color=red>please fill your password</font></center>";
    }
}
?>
    <h1>User Login</h1>
    <form method="post">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="txtfield" tabindex="1">
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" class="txtfield" tabindex="2">
      <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
   </form>
  </div>
<script type="text/javascript">
$(function(){
  $('#loginform').submit(function(e){
    return false;
  });
  $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</body>
</html>

closeButton选项将始终导致在单击相应按钮时关闭模态。从leanModal源代码来看，似乎没有任何直接的方法来操作其事件处理回调。

因此，如果您只想在字段未填充的情况下保持表单模式打开，并让服务器端代码执行验证，那么您只需执行以下操作：

$('#loginform').submit(function(e){
    if(!$('#username').val()) {
        $('#loginmodal').show();
    }
    else
        console.log("Enter your username");
    return false;
});

jsfiddle上的现场演示。请注意，我在表单标记中添加了一个id，并修复了fiddle中一些格式错误的HTML标记。

没有机会进行测试，但尝试停止click函数的传播，这样做会告诉浏览器不要完成此事件的默认操作。

$('#loginbtn').click(function(e){
    if(!$('#username').val()){
        e.stopPropagation();
    }

})；

或者，正如另一个答案所建议的那样，尝试使用jquery验证，这将有助于使所有这些工作更加容易，我喜欢使用：http://jqueryvalidation.org/

这似乎与这个问题非常相似：如何在不通过jQuery 提交的情况下强制进行html5表单验证

这个答案假设您将向必要的表单元素添加required属性，并且如果需要旧的浏览器支持，还假设您使用诸如html5shiv之类的polyfill。

使用jquery validationEngine。它很适合你的要求。参见demo here

您在示例html中有一些丢失的信息，因此表单ID丢失，jQuery将不会附加到它。

我通过使用AJAX对带有json响应的表单操作来处理这种情况。

以下是我最近的一个应用程序的示例。。。请注意event.prventDefault（）方法可以阻止表单提交。

    $(function () {
        jQuery('body').on('submit', '#frmlOGIN', function (event) {
            event.preventDefault();
            jQuery.post("?action=ajax_signup", jQuery("#frmlOGIN").serialize(), function (data) {
                if (data.status == "OK") {
                    jQuery("#modal_content").html(data.content);
                } else {
                    jQuery("#error_message").html(data.response);
                }
            });
        });
        $('#modaltrigger').leanModal({
            top: 110,
            overlay: 0.45,
            closeButton: ".hidemodal"
        });
    });

下面是一个jsfiddle示例。

http://jsfiddle.net/LqmzwwL3/

相关文章：