Jquery Validation Plugin Error This[0] is undefined - Sharepoint Online Add-in Development

Question

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 (!$("#FormCreate").valid()) {  //<=== Error Here...
            console.log("error");
        }

    });

});

Answer 1

SharePoint is built on ASP.NET. Part of the pattern of ASP.NET pages is that the whole page behaves a form and has a form as the top level element under body. As such you can't embed a form within a form.

We can create a Client Web Part in the SharePoint hosted add-in, and using the example code below to achieve the form validation.

<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>
<head>
    <title></title>   
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_es.min.js"></script>
    <script type="text/javascript">
        'use strict';
        $(document).ready(function () {
            $('#FormCreate').validate({
                rules: {
                    thisval: "required"
                }
            });
            $("#BtnCreate").on("click", function () {
                if (!$("#FormCreate").valid()) {  //<=== Error Here...
                    console.log("error");
                }
            });
        });
    </script>
</head>
<body>
    <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>
</body>
</html>