jQuery 在 SharePoint 页面应用程序的 jquery UI 对话框中验证插件

Question

我创建了自定义 SharePoint 页面，我需要在对话框 window 中验证表单。为此，我使用 jqueryvalidation.org。但这对我不起作用，我很困惑。

具有 ContentPlaceHolderID 的页面="PlaceHolderAdditionalPageHead":

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormListItemNew.aspx.cs" Inherits="Layouts.ContenetTypes.FormListItemNew" DynamicMasterPageFile="~masterurl/default.master" %>

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=7;IE=8;IE=9;IE=10,IE=11" />

<link  type="text/css" media="screen" rel="stylesheet" href="/_Layouts/ContenetTypes/css/jquery-ui.css">
<SharePoint:ScriptLink ID="ScriptLinkJQuery" runat="server" Name="/_Layouts/ContenetTypes/js/jquery-1.10.2.min.js" OnDemand="False" LoadAfterUI="False" /> 
<SharePoint:ScriptLink ID="ScriptLinkJQueryUI" runat="server" Name="/_Layouts/ContenetTypes/js/jquery-ui.min.js" OnDemand="False" LoadAfterUI="False" /> 
<SharePoint:ScriptLink ID="ScriptLinkJQueryValidation" runat="server" Name="/_Layouts/ContenetTypes/js/jquery.validate.min.js" OnDemand="False" LoadAfterUI="False" /> 
<SharePoint:ScriptLink ID="ScriptLinkJQueryValidationAdditional" runat="server" Name="/_Layouts/ContenetTypes/js/additional-methods.min.js" OnDemand="False" LoadAfterUI="False" /> 
<SharePoint:ScriptLink ID="ScriptLinkCustom" runat="server" Name="/_Layouts/ContenetTypes/js/Engine.script.UI.js" OnDemand="False" LoadAfterUI="True" />

ContentPlaceHolderID="PlaceHolderMain":

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div><input id="addNewRouteButton" type="button" value="Добавить маршрут" />/div>

<div id="dialog" title="Добавление пункта назначения" >
    <form id="dialogForm" action="" class="myClass">
            <label for="nameCountry">Страна</label>
            <input type="text" id="nameCountryID" name="nameCountry" class="required"/>
            <br/><br/>
            <label for="nameCity">Город</label>
            <input type="text" id="nameCityID" name="nameCity" class="required"/>
            <br/><br/>
            <label for="nameCompany">Организация</label>
            <input id="nameCompanyID" name="nameCompany"/>
    </form>
</div>
</asp:Content>

里面Engine.script.UI.js：

$(document).ready(function () {
  $('#dialogForm').validate({
    rules: {
        nameCountry: {
            required: true
        },
        nameCity: {
            required: true
        },
        nameCompany: {
            required: false
        }
    },
    messages: {
        nameCountry: {
            required: "Это поле обязательно для заполнения"
        },
        nameCity: {
            required: "Это поле обязательно для заполнения"
        }
    },
    submitHandler: function (form) {
        alert('form Valid');
        return false;
    },
    invalidHandler: function (event, validator) {
        alert('Form not valid');
        return false;
    }
});

$("#addNewRouteButton").click(function (e) {
    $("#dialog").dialog("open");
});

$("#dialog").dialog({
    debug: true,
    autoOpen: false,
    hide: 'clip',
    show: 'clip',
    resizable: false,
    height: 'auto',
    modal: true,
    buttons: {
        "Test submit": function () {
            $('#dialogForm').valid();
            $('#dialogForm').submit();
        }
        "Отмена": function () {
            $(this).dialog("close");
        },
    focus: function() {
        $("#nameCountryID").focus();
    },
    open: function (type, data) {
        $(this).parent().appendTo($("#dialogForm"));
    }
});

表单总是 return TRUE，没有任何反应。我试图找出错误很多天，但没有结果。我的错误在哪里？？请帮助我！

呈现的浏览器html代码：

<DIV class="ui-dialog-content ui-widget-content" id=dialog jQuery1102012247788649494162="86">
<FORM class=myClass id=dialogForm>
    <LABEL for=nameCountry>Страна</LABEL> 
    <INPUT name=nameCountry class="required ui-autocomplete-input" id=nameCountryID type=text autocomplete="off" jQuery1102012247788649494162="210"> 
    <BR><BR>
    <LABEL for=nameCity>Город</LABEL>
    <INPUT name=nameCity class="required email ui-autocomplete-input" id=nameCityID type=text autocomplete="off" jQuery1102012247788649494162="232">
    <BR><BR>
    <LABEL for=nameCompany>Организация</LABEL>
    <INPUT name=nameCompany id=nameCompanyID>
    <INPUT name=ctl00$PlaceHolderMain$TextBox1 class=required id=ctl00_PlaceHolderMain_TextBox1 type=text ClientIDMode="Static">
    <INPUT name=ctl00$PlaceHolderMain$btnSubmit id=ctl00_PlaceHolderMain_btnSubmit onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderMain$btnSubmit", "", true, "", "", false, false))' type=submit value=Submit> 
</FORM>

Answer 1

jQuery 应该在 UI 之后加载。 LoadAfterUI="true"。

请注意，您的文件夹名为 'ContenetTypes'。不确定这只是 localization/language 还是拼写错误。

Answer 2

在填写了一些缺失的部分并更正了您的各种语法错误后，我已经开始工作了。

.dialog() 方法的 buttons 选项中缺少逗号，就在 "Test Submit" 之后，如控制台日志中的错误所示。
.dialog() 方法中的 buttons 选项缺少右大括号 }，如控制台日志中的错误所示。
在 HTML 标记中缺少 id 或 addNewRouteButton 的按钮。我添加了一个只是为了让 jsFiddle 工作。
在 id="dialog" 元素上缺少结束 div 标记 </div>。
DOM 就绪事件处理程序缺少右大括号，}); 如控制台日志中的错误所示。
您在 "Test Submit" 中的 .valid() 方法导致重复验证，因此我将其注释掉。
您在 .dialog() 方法中定义的 "open" 按钮似乎试图 open/create 已经打开的对话框。这没有意义，所以我把它注释掉了。
您的代码中没有定义 WebForm_DoPostBackWithOptions 变量，因此它导致了 jsFiddle 中的控制台错误。我删除它是因为您不需要在提交按钮中使用内联 onclick 处理程序。只需使用插件内置的 submitHandler 即可运行 click.

演示：http://jsfiddle.net/Lyt0awg3/

Answer 3

也许它会对某人有所帮助。

我解决了我的问题。有必要将 id="dialog" 的元素包裹在 id="dialogForm" 的元素中并得到这个：

<form id="dialogForm" action="" >
    <div id="dialogAddNewRoute" title="Добавление пункта назначения" class="CustomDialogCSS">
        <fieldset>
            <label for="nameCountry">Страна</label>
            <input type="text" id="nameCountryID" name="nameCountry" />
            <br/><br/>
            <label for="nameCity">Город</label>
            <input type="text" id="nameCityID" name="nameCity" />
            <br/><br/>
            <label for="nameCompany">Организация</label>
            <input id="nameCompanyID" name="nameCompany" />
        </fieldset>
    </div>
</form>

我很困惑，但这在 SharePoint 的 ASPX 页面中对我来说确实有效。我的js代码很好，除了一些小错误，感谢减去我的声誉！

重要，加载页面需要添加js $(document).ready(function ():

 $('#dialogAddNewRoute').wrap("<form id=\"dialogFormAddRoute\" action=\"\"></form>");

jQuery 在 SharePoint 页面应用程序的 jquery UI 对话框中验证插件

jQuery validate plugin inside a jquery UI dialog for SharePoint page application

asp.net

sharepoint

jquery

jquery-validate

jquery-ui-dialog