Question

I have a JQuery modal popup form on a classic ASP page. It’s set up for the user to click a link to open the form. They enter their email address, and submit the form. What I’d like to do is check if the email is in my database and if it’s not, re-load the modal popup form with an error message.

The form is working fine, but I’m not sure how to have the form pop up again if the email wasn’t found without setting up another popup for that. I’m just starting JQuery, so sorry if this is an easy question. I’ve looked around but haven’t found any examples for this.

Here’s the JQuery code:

<script type="text/javascript">
    $(function () {

        //Modal pop-up form
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $("#dialog:ui-dialog").dialog("destroy");

        var email = $("#email"),
                allFields = $([]).add(email);
                tips = $(".validateTips");

        function updateTips(t) {
            tips
                    .text(t)
                    .addClass("ui-state-highlight");
            setTimeout(function () {
                tips.removeClass("ui-state-highlight", 1500);
            }, 500);
        }

        function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("Length of " + n + " must be between " +
                        min + " and " + max + ".");
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp(o, regexp, n) {
            if (!(regexp.test(o.val()))) {
                o.addClass("ui-state-error");
                updateTips(n);
                return false;
            } else {
                return true;
            }
        }

        $("#dialog-form").dialog({
            autoOpen: false,
            height: 350,
            width: 350,
            modal: true,
            buttons: {
                "Send Login": function () {
                    var bValid = true;
                    allFields.removeClass("ui-state-error");

                    bValid = bValid && checkLength(email, "email", 5, 80);

                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Please enter a valid email address.");

                    if (bValid) {
                        $("#users tbody").append("<tr>" +
                                "<td>" + email.val() + "</td>" +
                            "</tr>");
                        $(this).dialog("close");
                        $("form[name='modalPopup']").submit()
                    }

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        $("#send-password")

                .click(function () {
                    $("#dialog-form").dialog("open");
                });


    });
</script>

Here’s the link that opens the form:

<strong>Forgot your login?:</strong> <a href="#" id="send-password">click here</a></p>

And here’s the form:

<div id="dialog-form" title="Send My Login">
        Enter the email address associated with your account. Your password will be sent to you.
        <br />
        <strong>If you do not have an email address</strong>, or do not 
        remember it, please contact your Human Resources department to have your login 
        provided to you.

        <p class="validateTips"></p>

        <form action="SendLogin.asp" method="Post" name="modalPopup">
        <fieldset>

            <label for="email">Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />

        </fieldset>
        </form>
    </div>

Thanks a lot for any help!

Answer 1

Ok, so I was able to achieve the goal I described in the comment above. I added a javascript querystring function:

function getQuerystring(key, default_) {
        if (default_ == null) default_ = "";
        key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
        var qs = regex.exec(window.location.href);
        if (qs == null)
            return default_;
        else
            return qs[1];
    }

And then call it in my popup parameters:

$("#dialog-form").dialog({
            autoOpen: getQuerystring('loginform'),
            height: 350,
            width: 350,
            modal: true,.....

So now it will autoOpen if the querystring is “true”, otherwise it will be “false” and open only when clicked. This should work for me, but if any more experienced members have better advice I’d gladly listen.