0

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.

  • What is asuntoCmp? Is this supposed to be emailCmp? – Submits Mar 9 '15 at 15:21
  • @Submits No. It's subjectCmp instead. My bad. My code is in Spanish, fixed and thanks. – Mauricio Arias Olave Mar 9 '15 at 16:56
  • 1
    Just an fyi, sandboxed solutions such as this is deprecated in SharePoint Online. It's advised to switch to the new app model. – wjervis Mar 9 '15 at 17:06
  • @wjervis Thanks. I'll talk with my coworker for if we can switch to app model however I do not have such knowledges. Any tutorial for learn How to develop apps for SharePoint Online are welcome: My question on Meta.SharePoint ask about this specific topic BTW. – Mauricio Arias Olave Mar 9 '15 at 17:24
  • @Mauricio, I learned it by just diving into it. Microsoft has some pretty good code samples, and there are a lot of examples around. The main thing is that REST is a more enticing way to perform CRUD operations (only method for uploading files > 1.5MB as well). This link explains the differences between CSOM and REST (I should note that it's biased towards REST). – wjervis Mar 9 '15 at 17:51
0

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.