Identify possible bug vectors, javascript seems disabled for web forms on hybrid site after javascript alert

Question

Issue: When a javascript validator (.valid()) fails (A user did not put in email in abc@abc.com), pops up an alert message(alert("...")), applies a css rule to the bad field. It appears as if other web-form buttons (check in ticket) stop working. This happens on our production servers, but not dev/test servers. This happens in the 3 browsers I tested, IE11, chrome, FF.

IIS stack, dev/test are VMs, production are physical servers.

the 'check in' buttons are the older webform portion, the new portion is knockout.js and sends to an mvc controller.

what are some possible reasons for this that I can investigate?

Things I have done already:

-installed the KB260088 about changing the browser agent recognition, no result

-compared installed packages on test vs. prod, the only difference noted was more security updates on production.

-Altered code to remove the 'validation' check. it appears to work when I remove the top $('.required') portion of this code block from the knockoutJS portion of the javascript code

        vm.save = function () {
        var valid = true;
        $('.required').each(function () {
            if ($(this).valid() == 0) valid = false;
        });
        if (valid) {
            var item = vm.selectedItem();
            item.Company = (item.Company == null) ? "" : item.Company;
            item.Phone = (item.Phone == null) ? "" : item.Phone;
            item.Desc = (item.Desc == null) ? "" : item.Desc;
            item.ClaimContactID = (item.ClaimContactID == 0) ? null : item.ClaimContactID;
            $.ajax({
                url: csMvcController('ClaimContacts', "SaveContact"),
                data: { claimID: claimID, contactID: item.ClaimContactID, contactType: item.ClaimContactTypeID, fName: item.FirstName, lName: item.LastName, company: item.Company, phone: item.Phone, email: item.Email, desc: item.Desc, marketId: item.MarketId, regionSite: item.RegionSite },
                dataType: "json",
                type: "POST",
                success: function (response) {
                    item.ClaimContactID = response["ContactID"];
                    vm.selectedItem(null);
                    ShowButtons(true);
                }
            });
        } else {
            alert("Required information was either missing or not in the proper format.");
        }
    };

I'm fairly certain that the check-in button is web forms, due to it's format:

<asp:Button ID="btnNewLegal" runat="server" Text="Check-In (Save Changes)" CssClass="cs-btn etc.etc..."
                            OnLoad="btnNewLegal_Load" OnClick="btnNewLegal_Click"></asp:Button>

Thank you in advance for your help, unfortunately I can't quite identify what's going wrong here, so I don't know quite what to google for. Please let me know if I've poorly formatted and I'll update.

Answer 1

it appears that initially the knockout.js new stuff (which was a rendered partial) was wrapped in a form, and nesting forms in asp.net is a no-go, so it stripped that tag out entirely. The .valid() js (I assume) tried to validate the only form (the aspnetform) which caused the submit buttons to no longer function. I removed the valid() functionality, hand-coded some javascript (just making certain some fields were not blank, but please forgive me) and was able to restore functionality to existing buttons and allow the knockout.js functionality to work as well.

moral of the story: watch your form nesting in asp.net web forms. don't use .valid() unless you're certain it's validating the form you want it to.