表單在彈出框中提交

我在彈出框中創建一個登錄表單。當用戶名字段留空時，會出現一條錯誤消息通知用戶填寫空白的用戶名字段。作爲測試，我點擊登錄按鈕，離開用戶名字段，並按預期在彈出框中顯示消息。但問題是彈出框被立即關閉。所以，我的問題是如何讓彈出框打開並顯示錯誤消息？表單在彈出框中提交

這裏是我的腳本：

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

來源

2014-08-28 willcooler

對於這種類型的方法使用引導 – 2014-08-28 04:30:22

@PareshGami我也嘗試過bootstrap，但彈出框將消失，當我點擊提交。 – willcooler 2014-08-28 04:32:52

用於檢查用戶名使用jquery驗證功能。當用戶名不輸入時返回false – 2014-08-28 04:34:09

使用jQuery validationEngine。這對你的要求是一個不錯的選擇。請參閱demo here

來源

2014-08-28 04:34:25

沒有機會測試，但嘗試停止click函數的傳播，這樣做會告知瀏覽器未完成此事件的默認操作。

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

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

}）;

或作爲其他答案建議嘗試使用jQuery驗證，這將在得到幫助所有這更容易，我喜歡使用工作：http://jqueryvalidation.org/

來源

2014-08-28 04:37:14 onzur

這似乎是非常類似於這樣的問題：How to force a html5 form validation without submitting it via jQuery

該答案假定您將爲必要的表單元素添加required屬性，並且如果需要舊的瀏覽器支持，則使用html5shiv等polyfill。

來源

2014-08-28 04:40:30 dperish

您在示例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/

來源

2014-08-28 05:05:02

的closeButton選項總會引起點擊相應的按鈕時要關閉模式。看看leanModal源代碼，似乎沒有任何直接的方法來操縱它的事件處理回調。

所以，如果你想要做的就是保持打開，如果字段沒有填寫表格模式，讓你的服務器端代碼執行，你可以做驗證如下：

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

直播在jsfiddle上進行演示。請注意，我在表單標記中添加了id，並在小提琴中修復了一些格式不正確的HTML標記。

來源

2014-08-28 05:07:44

@willcooler如果你發現這是正確答案，請標記爲接受。謝謝：） – 2014-08-28 14:45:08

表單在彈出框中提交

回答

相關問題