How to not open a new window (JavaScript popup) if jQuery validation plugin returns false? (ASP.NET)

Question

Hi,

I have an .aspx page with a couple of textfields. I validate these with jQuery validation plugin when the user clicks the submit button. When the submit button is clicked I also open up a new window, but I only want to open the window if the fields are correctly filled out.

How do I stop the window from opening if the fields are not validated?

.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    btnSubmit.Attributes.Add("onClick", "return OpenPopup()");
}

.aspx

<script type="text/javascript">
        function OpenPopup() {
            window.open("AssessmentDocument.htm", "List", "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=230,height=140");
        }
</script>

$("#AdviceForm").validate({
    errorPlacement: function (error, element) {
        error.insertBefore(element.prev());
    }
});

<label>Your Name *</label>
<asp:TextBox ID="txtName" CssClass="required" runat="server"/>
<br />

<label>Your Email *</label>
<asp:TextBox ID="txtEmail" CssClass="required email" runat="server"/>

<asp:Button ID="btnSubmit" CssClass="adviceSubmit" runat="server" Text=""  onclick="btnSubmit_Click" />

What I want to do is that the user must enter their name and email and when they do, they can click the submit button (data gets inserted into a database) and get a popup with a link to a document to download. It doesn't have to be any security here really, if they check the page source code they can see the url to the popup but that's alright.

If you suggest me to do it in another way please let me know.

Edit:

I updated the jQuery to

$(document).ready(function () {
    $("*[id$='btnSubmit']").attr("disabled", true); 
    $("#AdviceFOrm").validate({
        errorPlacement: function (error, element) {
            error.insertBefore(element.prev());
                $("*[id$='btnSubmit']").removeAttr("disabled");
        }
});

However, if the user enters something in the name field and at least one character in the email field it doesn't validate (Need to enter a valid email address) but I still get the pop up. If I don't enter something in the name field but a proper email it doesn't validate but I get the pop up. How do I need to alter the script?

edit2:

got it to work with this

    <script type="text/javascript">


        $(document).ready(function () {
            $("#FreeBusinessAssessmentForm").validate({
                errorPlacement: function (error, element) {
                    error.insertBefore(element.prev());
                        //disable the submit button
                }
        });

         $('#lblResponse').fadeOut(8000, function () {
                $(this).innerHTML("");
            });
        });

        function onClick() {
            if ($("#FreeBusinessAssessmentForm").valid())
                return OpenPopup();
        }
</script>

Answer 1

hi peter,

depends on how secure you want it to be. but if basically you want to prevent the user from doing the popup window when validation fails, you can just use remove the onclick attribute or disable the button.

<script>
  $(document).ready(function(){
    if($("#AdviceForm").valid()){
      $("*[id$='btnSubmit']").attr("disabled",true); //disable the submit button
    }
    else{
      $("*[id$='btnSubmit']").removeAttr("disabled");
    }
  });
  </script>

Updated with your validation library code.