0

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");
        }

    });

});
  • In which file and on which line you are getting this error?? – Ganesh Sanap Apr 20 at 8:10
  • I don't see anything in your HTML with the ID FormActAuditoria. As far as I can tell, you're trying to reference a non-existing item. – jpollar Apr 20 at 13:17
  • @jpollar Sorry, you are right. I extract html and script mainly code bad. I edit it. – LuisEduardox Apr 20 at 18:06
  • @GaneshSanap I'm getting error in create.js when call valid method to validate form. – LuisEduardox Apr 20 at 18:08
  • Try adding debugger at that line and check the value of this. Also use same version of jQuery and jquery validate. – Ganesh Sanap Apr 20 at 19:06
0

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>

enter image description here

  • "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" this is main point by we can't use jQuery Validation inside a aspx page. – LuisEduardox Apr 25 at 4:41

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.