Javascript 在弹出框中提交表单
我在弹出框中创建了一个登录表单。当用户名字段留空时，将显示一条错误消息，通知用户填写空用户名字段。作为测试，我单击login按钮，留下username字段，消息会按预期显示在弹出框中。但问题是弹出框会立即关闭。 因此，我的问题是如何保持弹出框打开并显示错误消息 这是我的剧本：Javascript 在弹出框中提交表单,javascript,php,html,forms,Javascript,Php,Html,Forms,我在弹出框中创建了一个登录表单。当用户名字段留空时，将显示一条错误消息，通知用户填写空用户名字段。作为测试，我单击login按钮，留下username字段，消息会按预期显示在弹出框中。但问题是弹出框会立即关闭。 因此，我的问题是如何保持弹出框打开并显示错误消息 这是我的剧本： <!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text
<!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>
模式登录窗口演示
模式登录
用户登录
用户名：
密码：
$（函数（）{
$（'#loginform'）。提交（函数（e）{
返回false；
});
$（'#modaltrigger'）.leanmodel（{top:110，overlay:0.45，closeButton:“.hidemodal”}）；
});
验证引擎请参见没有机会进行测试，但尝试停止单击功能的传播，这样做会告诉浏览器不要完成此事件的默认操作
$('#loginbtn').click(function(e){
if(!$('#username').val()){
e.stopPropagation();
}
或者，正如另一个答案所建议的那样，尝试使用jquery验证，这将有助于使所有这些更容易地工作，我喜欢使用：这似乎与这个问题非常相似：
该答案假设您将向必要的表单元素添加
required $(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"
});
});
单击相应按钮时，
closeButtonleanModal$('#loginform').submit(function(e){
if(!$('#username').val()) {
$('#loginmodal').show();
}
else
console.log("Enter your username");
return false;
});
现场演示。请注意，我在表单标记中添加了一个
id