Question

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

这是我的剧本：

<!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>

Answer 1

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

因此，如果你想要做的只是在未填写字段的情况下保持表单模式打开，并让服务器端代码执行验证，则可以执行以下操作：

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

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

Answer 2

使用jquery validationEngine。这是一个很好的满足您的要求。见demo here

Answer 3

Haven没有机会测试但是尝试停止点击功能的传播，这样做会告诉浏览器没有完成此事件的默认操作。

$('#loginbtn').click(function(e){

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

}）;

或另一个答案建议尝试使用jquery验证，这将有助于让所有这些更容易使用我喜欢使用：http://jqueryvalidation.org/

Answer 4

这似乎与此问题非常相似：How to force a html5 form validation without submitting it via jQuery

该答案假设您要将required属性添加到必要的表单元素中，并且如果需要旧浏览器支持，则还要使用填充程序（如html5shiv）。

Answer 5

示例html中有一些缺少的信息，缺少表单ID，因此jQuery不会附加到它。

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

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

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

表单在弹出框中提交

5 个答案: