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
validateFormfunction in a asp.net Button in theOnClientClickproperty. - Try validate a single field (only for discard other code which may disable validation functionality).
- Create a simple
HTMLpage 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:
- Create a document in a Document Library.
- Generate registers in more that one
List. - Query and update generated registers step two.
Is in somehow related with this question, but I'm not using AjaxControlToolkit.
asuntoCmp? Is this supposed to beemailCmp?subjectCmpinstead. My bad. My code is in Spanish, fixed and thanks.