Question

I have a website written in asp.net ( this part is just HTML and jQuery though ) with a form with a submit button. I wrote my own validation for each text box in jquery, if each passes, then it sends the form through ajax to c# codebehind. This works in every browser just fine, even IE7 and IE8 , the problem is when I look at the page through the IPad ( Safari ) it completely skips the validation and refresh the entire page. I only have a 4 year old ipad with ios2 i believe or maybe ios3 , either way I would like this to work in all browsers.

code:

    <input type="button" id="btnLogin"  class="button" value="Login" style="top: 325px;" onclick="fnSignUp();" />


    function fnSignUp() {
        // Check for Valid EMail
        var rege = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if (rege.test($('#<%= txtEmail.ClientID %>').val())) { }
        else {
            $('#<%= lblErrorSignUp.ClientID %>').text("Invalid EMail");
            return;
        }

        //Check For Empty First Name
        if ($('#<%= txtFNameSignUp.ClientID %>').val() == "") {
            $('#<%= lblErrorSignUp.ClientID %>').text("Enter First Name");
            $('#<%= lblFNameError.ClientID %>').text(" *");
            return;
        }
        else $('#<%= lblFNameError.ClientID %>').text("");

        //Check For Empty Last Name
        if ($('#<%= txtLNameSignUp.ClientID %>').val() == "") {
            $('#<%= lblErrorSignUp.ClientID %>').text("Enter Last Name");
            $('#<%= lblLNameError.ClientID %>').text(" *");
            return;
        }
        else $('#<%= lblLNameError.ClientID %>').text("");

        //Check For Empty Zip Code      
        if ($('#<%=  txtZipSignUp.ClientID %>').val() == "") {
            $('#<%= lblErrorSignUp.ClientID %>').text("Enter Your ZipCode");
            return;
        }

        // Check For Valid Zip Code
        if (IsValidZipCode == false) {
            $('#<%= lblErrorSignUp.ClientID %>').text("Invalid US ZipCode");
            return;
        }

        //Check If Password is left empty
        if ($('#<%=  txtPass1.ClientID %>').val() == "") {
            $('#<%= lblErrorSignUp.ClientID %>').text("Enter A Password");
            return;
        }

        //Check that both Passwords match
        if ($('#<%=  txtPass1.ClientID %>').val() != $('#<%=  txtPass2.ClientID %>').val()) {
            $('#<%= lblErrorSignUp.ClientID %>').text("Both Passwords Must Match");
            return;
        }
        var email = $('#<%=  txtEmail.ClientID %>').val();
        var fname = $('#<%=  txtFNameSignUp.ClientID %>').val();
        var lname = $('#<%=  txtLNameSignUp.ClientID %>').val();
        var zip = $('#<%=  txtZipSignUp.ClientID %>').val();
        var city = $('#<%=  hidcity.ClientID %>').val();
        var state = $('#<%=  hidstate.ClientID %>').val();
        var lat = $('#<%=  hidLatitude.ClientID %>').val();
        var longi = $('#<%=  hidLongitude.ClientID %>').val();
        var pass = $('#<%=  txtPass1.ClientID %>').val();

        $.ajax({
            type: "POST",
            url: "Login.aspx/SignUpNewUser",
            data: "{'email':'" + email + "', 'fname' : '" + fname + "' ,  'lname' : '" + lname + "', 'zip' : '" + zip + "',  'city' : '" + city + "' ,  'state' : '" + state + "' ,  'lat' : '" + lat + "',  'longi' : '" + longi + "',  'pass' : '" + pass + "' }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var obj = $.parseJSON(msg.d);
                if (obj.login == "false") $('#<%= lblLoginMessage.ClientID %>').text("Login Failed");
                if (obj.login == "true") {
                    location.reload(true);
                }
            }
        });
        return false;
    }

Answer 1

I don’t have an ipad to test with, but you can try one or a combination of the following:

1. use return false; instead of return; to cancel the default button behavior.

2. bind the click event using jquery instead of the onclick attribute.

   $("#btnLogin").click(fnSignUp);
   

   binding using jquery is better anyways, because you separate the logic from the view of the page.