Javascript 使用jQuery在SharePoint ASPX网页上启动表单验证不起作用_Javascript_Jquery_Html_Twitter Bootstrap_Sharepoint

Javascript 使用jQuery在SharePoint ASPX网页上启动表单验证不起作用

javascript jquery html twitter-bootstrap sharepoint

Javascript 使用jQuery在SharePoint ASPX网页上启动表单验证不起作用,javascript,jquery,html,twitter-bootstrap,sharepoint,Javascript,Jquery,Html,Twitter Bootstrap,Sharepoint,我有一个问题，jQuery验证无法工作，在单击submit之后，它不会验证任何内容并提交表单这是引导表单输入：成功单击“提交”按钮后，字段中输入的内容将存储在我的SharePoint列表中：这是SharePoint列表中的列：以下是我的代码： $.validator.setDefaults（{ submitHandler:函数（）{ 警报（“已提交！”）； } } ); $（“#注册表单1”）。验证（{ 规则：{ ACI_客户端名称输入：“必需”，信息：{ ACI_客户端名称输

我有一个问题，jQuery验证无法工作，在单击submit之后，它不会验证任何内容并提交表单

这是引导表单输入：成功单击“提交”按钮后，字段中输入的内容将存储在我的SharePoint列表中：

这是SharePoint列表中的列：

以下是我的代码：


$.validator.setDefaults（{
submitHandler:函数（）{
警报（“已提交！”）；
}
} );
$（“#注册表单1”）。验证（{
规则：{
ACI_客户端名称输入：“必需”，
信息：{
ACI_客户端名称输入：“请输入客户端名称”，
/*此部分是从SHAREPOINT网站的联机指南中输入的-https://redcrust.wordpress.com/2014/04/13/using-jquery-validation-plugin-with-sharepoint-2013/ */
if（$（（“输入[title='ACI_client-name-input']））.attr（“name”）==未定义）{
$（“input[title='ACI_client-name-input']”）attr（“name”，$（“input[title='ACI_client-name-input']”）attr（“id”））；
}
错误元素：“em”，
errorPlacement:函数（错误，元素）{
//将'help block'类添加到error元素
错误。addClass（“帮助块”）；
//将“has feedback”类添加到父div.form-group
//为了向输入添加图标
元素。父元素（“.col-sm-5”）。添加类（“有反馈”）；
if（element.prop（“type”）=“复选框”）{
错误.insertAfter（element.parent（“label”）；
}否则{
错误。插入符（元素）；
}
//添加span元素（如果不存在），并对其应用图标类。
如果（！element.next（“span”）[0]）{
$（“”）。插入后面的（元素）；
}
},
成功：功能（标签、元素）{
//添加span元素（如果不存在），并对其应用图标类。
if（！$（元素）.next（“span”）[0]）{
$（“”）之后插入（$（元素））；
}
},
突出显示：函数（元素、errorClass、validClass）{
$（元素）.parents（.col-sm-5”）.addClass（“有错误”）.removeClass（“有成功”）；
$（元素）.next（“span”）.addClass（“glyphicon移除”）.removeClass（“glyphicon确定”）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.parents（“.col-sm-5”）.addClass（“has success”）.removeClass（“has error”）；
$（元素）.next（“span”）.addClass（“glyphicon ok”）.removeClass（“glyphicon移除”）；
}
} );
} );


客户名称
*
提交
取消

将输入标记ID中的“-”替换为“\u1”

将“ACI_客户端名称输入”修改为“ACI_客户端名称输入”

示例代码供您参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery validate</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>

<!--[if gte mso 9]>
<SharePoint:CTFieldRefs runat=server Prefix="mso:" FieldList="FileLeafRef,WikiField,_dlc_DocId,_dlc_DocIdUrl,_dlc_DocIdPersistId"><xml>

<mso:CustomDocumentProperties>
<mso:_dlc_DocId msdt:dt="string">5JSTYM4NXMKN-1550736763-50</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">56166d47-3111-4d9e-86c4-34fc0308c55f</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">http://sp2013/sites/team/_layouts/15/DocIdRedir.aspx?ID=5JSTYM4NXMKN-1550736763-50, 5JSTYM4NXMKN-1550736763-50</mso:_dlc_DocIdUrl>
</mso:CustomDocumentProperties>
</xml></SharePoint:CTFieldRefs><![endif]-->


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
    $.validator.setDefaults({
        submitHandler: function () {
            alert( "Submitted!" );
        }
    });

    $("#signupForm1").validate( {
        rules: {
                ACI_client_name_input: "required"
        },
        messages: {
                ACI_client_name_input: "Please enter the Client name",
        },      
        /* THIS PART WAS PUT IN FROM GUIDE ONLINE FOR SHAREPOINT SITES */
        //if ($("input[title='ACI_client-name-input']").attr("name") == undefined) {
        //  $("input[title='ACI_client-name-input']").attr("name", $("input[title='ACI_client-name-input']").attr("id"));
        //}

        errorElement: "em",
        errorPlacement: function ( error, element ) {
            // Add the `help-block` class to the error element
            error.addClass( "help-block" );

            // Add `has-feedback` class to the parent div.form-group
            // in order to add icons to inputs
            element.parents( ".col-sm-5" ).addClass( "has-feedback" );

            if ( element.prop( "type" ) === "checkbox" ) {
                error.insertAfter( element.parent( "label" ) );
            } else {
                error.insertAfter( element );
            }

            // Add the span element, if doesn't exists, and apply the icon classes to it.
            if ( !element.next( "span" )[ 0 ] ) {
                $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
            }
        },
        success: function ( label, element ) {
            // Add the span element, if doesn't exists, and apply the icon classes to it.
            if ( !$( element ).next( "span" )[ 0 ] ) {
                $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
            }
        },
        highlight: function ( element, errorClass, validClass ) {
            $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
            $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
        },
        unhighlight: function ( element, errorClass, validClass ) {
            $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
            $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
        }
    });
});
</script>
</head>

<body>

<form id="signupForm1" method="post" class="form-horizontal" action novalidate="novalidate">
  <div class="form-group row" style="margin-bottom: 15px;">
        <label class="col-lg-10 control-label" for="ACI_client-name-input">Client Name</label>
            <div class="col-lg-8 required-after">       
            <input type="text" class="form-control" id="ACI_client_name_input" name="ACI_client_name_input" placeholder="Ex: FleishmanHillard" required/>
            <span class="">*</span>
            </div>
    </div>

    <div class="form-group row col-lg-8">
        <button type="submit" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
        <button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='//fh126cloud.sharepoint.com/emplsrv/missupport/pages/MailChimpIntake.aspx'">Cancel</button>
  </div>
</form>
</body>
</html>


验证插件
$（函数（）{
$.validator.setDefaults({
submitHandler:函数（）{
警报（“已提交！”）；
}
});
$（“#注册表单1”）。验证（{
规则：{
ACI\u客户端\u名称\u输入：“必需”
},
信息：{
ACI_客户名称_输入：“请输入客户名称”，
},      
/*此部分是从SHAREPOINT网站的联机指南中输入的*/
//if（$（（“输入[title='ACI_client-name-input']））.attr（“name”）==未定义）{
//$（“input[title='ACI_client-name-input']”）attr（“name”，$（“input[title='ACI_client-name-input']”）attr（“id”））；
//}
错误元素：“em”，
errorPlacement:函数（错误，元素）{
//将'help block'类添加到error元素
错误。addClass（“帮助块”）；
//将“has feedback”类添加到父div.form-group
//为了向输入添加图标
元素。父元素（“.col-sm-5”）。添加类（“有反馈”）；
if（element.prop（“type”）=“复选框”）{
错误.insertAfter（element.parent（“label”）；
}否则{
错误。插入符（元素）；
}
//添加span元素（如果不存在），并对其应用图标类。
如果（！element.next（“span”）[0]）{
$（“”）。插入后面的（元素）；
}
},
成功：功能（标签、元素）{
//添加span元素（如果不存在），并对其应用图标类。
if（！$（元素）.next（“span”）[0]）{
$（“”）之后插入（$（元素））；
}
},
突出显示：函数（元素、errorClass、validClass）{
$（元素）.parents（.col-sm-5”）.addClass（“有错误”）.removeClass（“有成功”）；
$（元素）.next（“span”）.addClass（“glyphicon移除”）.removeClass（“glyphicon确定”）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.parents（“.col-sm-5”）.addClass（“has success”）.removeClass（“has error”）；
$（元素）.next（“span”）.addClass（“glyphicon ok”）.removeClass（“glyphicon移除”）；
}
});
});
客户名称
*
提交
取消