CODEWITHSUNDEEP
javascriptphphtmlforms
willcooler
willcooler

Reputation: 15

form submit in popup box

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>

Upvotes: 0

Views: 1893

Answers (5)

ivan.sim
ivan.sim

Reputation: 9298

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.

Upvotes: 1

Lucky Edward
Lucky Edward

Reputation: 146

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/

Upvotes: 0

Suchit kumar
Suchit kumar

Reputation: 11869

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

Upvotes: 0

dperish
dperish

Reputation: 1571

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.

Upvotes: 0

mhijazi
mhijazi

Reputation: 212

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/

Upvotes: 0

Related Questions