jeudi 12 mars 2015

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.








0 commentaires:

Enregistrer un commentaire