I'm development a Sharepoint Hosted Add-in in Sharepoint Online tenant. I'm using Jquery and Jquery Validation to make form validation, but I have a issue with JQuery Validation because of get error this[0] is undefined always in button Event.
I checked:
- Reference valid ID in form.
- Load Jquery and Jquery Validation scripts inside page.
- Verified in Browser Debugger that scripts load with status 200.
- Wrap script in a ready event handler [Jquery].
I'm new in Sharepoint development and I don't know if I need enabled something in tenant, site collection or this is a limitation to Sharepoint online ?
This is my currently code in Page.aspx:
Section to load Scripts
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">:
<meta name="WebPartPageExpansion" content="full" />
<!-- Css Files -->
<link rel="stylesheet" type="text/css" href="../../Content/AdminLte/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../Content/AdminLte/bower_components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../../Content/AdminLte/dist/css/AdminLTE.min.css" />
<link rel="stylesheet" type="text/css" href="../../Content/AdminLte/dist/css/skins/_all-skins.min.css" />
<!-- Javascript Files -->
<SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<script type="text/javascript" src="../../Scripts/jquery-3.3.1.min.js"></script>
<script src="../../Scripts/Plugins/jquery-validation/jquery.validate.js"></script>
<script src="../../Scripts/Plugins/jquery-validation/messages_es.js"></script>
<!-- Others Javascript Files -->
<script src="../../Scripts/LibreriasSP/sharepointplus-5.2.js"></script>
<script src="../../Scripts/Plugins/SweetAlert2/sweetalert.min.js"></script>
<script src="../../Scripts/Modulos/Audits/create.js"></script>
</asp:Content>
Html Section:
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" />
<form id="FormCreate" name="FormCreate">
<div class="box-body">
<div class="col-sm-12">
<div class="form-group col-sm-4">
<label for="titulo">Title (*)</label>
<input type="text" class="form-control" name="Title" id="Title" required>
</div>
<div class="form-group col-sm-4">
<label for="codigo">Smart Code (*)</label>
<input type="text" class="form-control" name="smartCode" id="smartCode" required>
</div>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-primary" id="BtnCreate">Create</button>
</div>
</form>
</asp:Content>
create.js
$(document).ready(function () {
// foo ...
$('#FormCreate').validate({
rules: {
thisval: "required"
}
});
$("#BtnCreate").on("click", function () {
if (!$("#FormActAuditoria").valid()) { <=== Error Here...
console.log("error");
}
});
});