Fields validation with Javascript in custom WebPart - SharePoint Online -

Question

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.

Answer 1

After research in the Internet I found finally the solution, here's the answer and the credits belong to him.

I'm not sure why the WebPart couldn't or can't detect the ASP.NET controls in var variables maybe there's some about the if conditionals...

Here's the full validation code that I'm using in the WebPart that I develop a few days ago.

<script type="text/javascript">

function validateForm() {

    //Declare variables.
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    /*For some unknown reason, fields to validate (if they're declared on variables type "var") are NOT detected.*/

    //Validate fields (ASP.NET fields).
    if (document.getElementById('<%= txtSubject.ClientID %>').value.length == 0) {
        alert("Field ''Subject'' is required.");
        document.getElementById('<%= txtAsunto.ClientID %>').focus();
        return false;
    } else if (document.getElementById('<%= txtEmail.ClientID %>').value.length == 0) {
        alert("Field ''Email'' is required.");
        document.getElementById('<%= txtEmail.ClientID %>').focus();
        return false;
    }
    else {
        if (!emailPattern.test(document.getElementById('<%= txtEmail.ClientID %>').value)) {
            alert("Field ''Email'' is invalid.");
            document.getElementById('<%= txtEmail.ClientID %>').focus();
            return false;
        }
        else{                   
            //Your code...
        }
    }
}</script>

N.B: The following code was tested and it works in pure HTML, SharePoint 2010 and SharePoint 2013 (Online).