form submit in popup box

Question

I create a login form in popup box. When the username field is left blank, an error message will appear to notify the user to fill in the empty username field. As a test, I click on the login button leaving the username field, and the message appears in the popup box as expected. But the problem is the popup box is closed immediately. So, my question is how do I keep the popup box open with the error message shown?

Here is my script:

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

@PareshGami i have tried the bootstrap too, but the popup box will disappear when I click submit. — willcooler, Aug 28 '14 at 04:32
For checking username use jquery validate function. which return false when username does not enter — Paresh Gami, Aug 28 '14 at 04:34
@PareshGami if i checked it by using php, the popup box would be gone, I want the popup box still show although i click the submit button, so how could be possible? — willcooler, Aug 28 '14 at 04:56
in html page take ajax function and from this function call php file and you can get — Paresh Gami, Aug 28 '14 at 04:58

ivan.sim · Answer 1 · 2014-08-28T07:16:22.227

The closeButton option will always cause the modal to be closed when the corresponding button is clicked. And looking at the leanModal source, there doesn't seem to be any direct way to manipulate its event-handling callback.

So if all you want to do is to keep the form modal opened if the fields are not filled, and let your server-side codes perform the validation you can just do the following:

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

Live demo on jsfiddle. Notice that I added an id to the form tag, and fixed some of the malformed HTML tags in the fiddle.

score 0 · Answer 2 · edited Aug 28 '14 at 04:53

0

use jquery validationEngine. It is a good one for your requirement. See demo here

edited Aug 28 '14 at 04:53

Bhavik Shah

2,300
1
17
32

answered Aug 28 '14 at 04:34

Suchit kumar

11,809
3
22
44

score 0 · Answer 3 · answered Aug 28 '14 at 04:37

Haven't had a chance to test but try stopping the propagation of the click function, doing that tells the browser to not complete the default action for this event.

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

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

});

or as the other answer suggests try using jquery validation which will help in getting all this to work much more easily I like to use: http://jqueryvalidation.org/

score 0 · Answer 4 · edited May 23 '17 at 11:57

0

This appears to be very similar to this question: How to force a html5 form validation without submitting it via jQuery

That answer assumes that you would be adding the required attribute to the necessary form elements, and also that you use a polyfill such as html5shiv if old browser support is a requirement.

edited May 23 '17 at 11:57

Community

1
1

answered Aug 28 '14 at 04:40

dperish

1,493
16
27

Lucky Edward · Answer 5 · 2014-08-28T05:17:51.043

You have some missing information in the sample html, the form ID is missing therefor jQuery will not attach to it.

I handle this situation by using AJAX for the form action with a json response.

Here is an example from one of my recent apps... Notice the event.preventDefault() method to keep the form from submitting.

    $(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"
        });
    });

Here is a jsfiddle example.

http://jsfiddle.net/LqmzwwL3/

form submit in popup box

5 Answers5