Bootstrap Form Validation不能使用jQuery在SharePoint ASPX网页上运行

Question

我遇到一个问题，即jQuery验证无法正常工作，点击提交后，它不会验证任何内容并提交表单。

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

这是SharePoint列表中的列：

以下是我的代码：

＆＃13;

＆＃13;

<script>
		$.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 - https://redcrust.wordpress.com/2014/04/13/using-jquery-validation-plugin-with-sharepoint-2013/ */
				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>

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是JSFiddle网址：https://jsfiddle.net/6ysz2eLc/3/

任何帮助都将受到高度赞赏！

Answer 1

在输入标签的ID中将“ - ”替换为“_”。

将“ACI_client-name-input”修改为“ACI_client_name_input”。

供您参考的示例代码：

await