Fields validation with Javascript in custom WebPart - SharePoint Online -

I'm currently developing a SandBox WebPart for SharePoint Online (2013) which have two TextBoxes.

I'm trying to add the following code for validate the Email and Subject TextBoxes once the Button click event raises.

<script type="text/javascript">

    function validateForm() {

        //Declare variables.
        var txtError = document.getElementById('<%= lblMsg.ClientID %>');
        var subjectCmp = document.getElementById('<%= txtSubject.ClientID %>');
        var emailCmp = document.getElementById('<%= txtEmail.ClientID %>');
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

        txtError.innerHTML = "";

        //Subject.
        if (subjectCmp.innerHTML.length === 0) {
            txtError.innerHTML = txtError.innerHTML + "Field 'Subject' is required. \n";
        }

        //Email.
        if (emailCmp.innerHTML.length === 0) {
            txtError.innerHTML = txtError.innerHTML + "Field 'Email' is required. \n";
        }
        else {
            if (!emailPattern.test(emailCmp.innerHTML)) {
                txtError.innerHTML = txtError.innerHTML + "'Email' field is invalid. \n";
            }
        }
    }

</script>

Here is the sample Visual WebPart:

<div class="csFila">
    <asp:Label ID="lblEmail" Text="Email" runat="server" CssClass="cslbl" />
    <div class="csctrl">
        <asp:TextBox ID="txtEmail" runat="server" MaxLength="255" />
    </div>
</div>
<div class="csFila">
    <asp:Label ID="lblSubject" Text="Subject" runat="server" CssClass="cslbl" />
    <div class="csctrl">
        <asp:TextBox ID="txtSubject" runat="server" MaxLength="255" />
    </div>
</div>

<div class="csFila">
    <asp:Label ID="lblSubject" Text="Subject" runat="server" CssClass="cslbl" />
    <div class="csctrl">
        <asp:TextBox ID="txtSubject" runat="server" MaxLength="255" />
    </div>
</div>
<asp:Panel ID="Panel1" CssClass="cspnlCarga" runat="server">
     <asp:FileUpload ID="File2" runat="server" />
     <asp:Panel ID="pnl_btn_field" runat="server">
         <input id="addFile" type="button" value="Send" onclick="validateForm();" /><br />
     </asp:Panel>
</asp:Panel>
<span id="TxtError" title="Here shows the error message."/>

The issue is, even when the TextBoxes has text on it, the Javascript function shows the "Field X is required" message.

The Visual WebPart doesn't has a form tag and I tested this code in a pure HTML page with the same results.

My requieremnt is validate these fields for preceed with the full functionality (register these info in a List).

What I tested:

• Add validateForm function in a asp.net Button in the OnClientClick property.


• Try validate a single field (only for discard other code which may disable validation functionality).


• Create a simple HTML page and test these code.

N.B: There's no much what to do in SharePoint Online AFAIK, but in resumen, I need to validate these data before call server code which have the full functionality which can be resumed in these steps:

1. Create a document in a Document Library.


2. Generate registers in more that one List.


3. Query and update generated registers step two.

Is in somehow related with this question, but I'm not using AjaxControlToolkit.