Dialog2, no form validation

GregKaufman · August 13, 2019, 6:59pm

Form validation does not trigger when validation is enabled for fields in a dialog2 (specifically dialog2 triggered by scriptrunner). Has anyone managed to get this to work? In the end I wrote out my own validators.

sfbehnke · August 13, 2019, 7:04pm

It works fine for me. You’d probably need to describe your problem in more detail.

GregKaufman · August 13, 2019, 8:18pm

Hi Steven, thanks for your reply. We are running Jira Server 8.2.4 and ScriptRunner 5.5.9.1. Dialog is triggered by a ScriptRunner fragment.

I did notice that running “AJS.formValidation” returns undefined in my Jira Instance on all of the screens I have tried.

Sample ScriptRunner REST endpoint code below:

import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
	import groovy.transform.BaseScript
	import com.atlassian.jira.component.ComponentAccessor
	import com.atlassian.jira.issue.Issue
	import com.atlassian.jira.project.Project
	import com.atlassian.jira.project.ProjectCategory
	import com.atlassian.jira.project.ProjectManager
	import com.atlassian.jira.bc.issue.search.SearchService
	import com.atlassian.jira.issue.search.SearchResults
	import com.atlassian.jira.web.bean.PagerFilter

	import com.atlassian.jira.permission.ProjectPermissions
	import com.atlassian.jira.security.plugin.ProjectPermissionKey
	import com.atlassian.jira.security.PermissionManager

	import javax.ws.rs.core.MediaType
	import javax.ws.rs.core.MultivaluedMap
	import javax.ws.rs.core.Response

	@BaseScript CustomEndpointDelegate delegate


	testDialog { MultivaluedMap queryParams ->

		def dialog = """	
			
			<section role="dialog" id="sr-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true" data-aui-remove-on-hide="true">
				<header class="aui-dialog2-header">
					<h2 class="aui-dialog2-header-main">                
					Create Dev Sample<div id="projectName" style="display:inline-block"> for project</div>           
					</h2>
					<a class="aui-dialog2-header-close">
						<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
					</a>
				</header>

				<div class="aui-dialog2-content">
					<textarea id="hidden-input" type="textarea" style="display:none;"></textarea>
					<input id="hidden-issueKey" type="hidden"/>						
					<form class="aui">
						<input id="test" type="text" class="text" maxlength="10" data-aui-validation-field minlength="10"/>
					</form>
				</div>
				</div>
				<footer class="aui-dialog2-footer">
					<div class="aui-dialog2-footer-actions">
						<button id="submit" class="aui-button">Submit</button>
						<button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
					</div>
				</footer>
			</section>
		"""
	Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build()
}

sfbehnke · August 13, 2019, 9:45pm

It wasn’t clear this was in Scriptrunner. That literally changes everything. Foremost, you should seek support on Atlassian Answers, not the Atlassian Developer Community. What you’re asking here is specific to the Scriptrunner plugin and not the plugin framework at large.

Next, I see title text in your screenshot (tooltip) that is not present in your provided code snippet. You haven’t provided a complete example to look at here.

Another thing, Form Validation web resource module must be included, it is NOT included by default as it indicates on the Form Validation page.

Finally, I don’t see any javascript reference, so I’m not sure how you’re binding to the submit event aui-valid-submit? Furthermore, your button is not within the <form> element NOR does the button have a form='myform' attribute… so how is the button triggering the form?

GregKaufman · August 16, 2019, 9:38pm

Hi Steve,

Thanks for your feedback. The reason I chose to place this post in the community forum is because I wanted to ask the community first before escalating. I will take your advice and start a support ticket.

Thanks, the issue is most likely because I didn’t include the validation page. I will give that a try.

The title in the screenshot was generated by Chrome. The posted code was what was used to generate the screenshot.

sfbehnke · August 16, 2019, 11:48pm

Okay, then I suspect it’s my other piece of advice.

The SUBMIT button a dialog is not within the FORM. This means that clicking the submit button will NOT trigger the form validation. You need to add a ‘form’ attribute to the submit button on the dialog to trigger it correctly.

GregKaufman · September 5, 2019, 3:23pm

Thanks Steven, that was the problem.

Raja · March 17, 2020, 8:59am

With the following code i am unable to access the inputs inside a dialog(dialog2)…How to access the elements inside dialog2?
without dialog.the form submission working fine

function saveConnection()  {
            var options = {
                Url : AJS.$("#Url").val(),
                userName : AJS.$("#userName").val(),
                password : AJS.$("#password").val(),
                customer : AJS.$("#jira-projects-id").val(),
                customerDescription : AJS.$("#customerDescription").val(),
                Client : AJS.$("#Client").val(),
                authenticationType : AJS.$('#authent-types-id').val(),
                tokenAccountUrl : AJS.$('#tokenAccountUrl').val(),
            };

<section role="dialog" id="add-conn-dialog" class="aui-layer aui-dialog2 aui-dialog2-large" aria-hidden="true" style="width: 650px;">
        <header class="aui-dialog2-header">
            <h2 class="aui-dialog2-header-main">Add Connection</h2>

            <a class="aui-dialog2-header-close">
                <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
            </a>
        </header>
    <form id="valid-submit-form" class="aui">
        <div class="field-group">
            <label for="customerDescription">Customer Description</label>
            <input class="text" type="text" id="customerDescription" data-aui-field data-aui-validate-required="required" name="customerDescription" title="Customer Description">
        </div>

        <div class="field-group">
            <label for="Url">URL</label>
            <input class="text" type="text" id="Url" data-aui-field data-aui-validate-required="required" name="Url" title="Server Info">
        </div>

        <div class="field-group">
            <label for="userName">User Name</label>
            <input class="text" type="text" id="userName" data-aui-field data-aui-validate-required="required" name="userName" title="User Name">
        </div>

        <div class="field-group">
            <label for="password">Password</label>
            <input class="text" type="password" id="password" data-aui-field data-aui-validate-required="required" name="password" title="Password">
        </div>

        <div class="field-group">
            <label for="jira-projects-id">Jira Project Key</label>
            <input class="text" type="text" id="jira-projects-id" data-aui-field data-aui-validate-required="required" name="jira-projects" title="Customer Guid">
        </div>

        <div class="field-group">
            <label for="Client">Client</label>
            <input class="text" type="text" id="Client" data-aui-validation-field data-aui-validation-required="required" name="Client" title="Sap Client">
        </div>

        <div class="field-group">
            <label for="authenticationTypes">Authentication Type</label>
            <input class="text" type="text" id="authent-types-id" name="authentication-types" data-aui-validation-field data-aui-validation-required="required" length="30" hidden="true" />
        </div>

        <div class="field-group">
            <label for="tokenEndpointUrl">Token Endpoint Url</label>
            <input class="text" type="text" id="tokenAccountUrl" data-aui-validation-field data-aui-validation-required="required" name="tokenEndpointUrl" title="Token Endpoint Url">
        </div>
        <footer class="aui-dialog2-footer">
            <div class="aui-dialog2-footer-actions">
                <button id="dialog-submit-button" class="aui-button aui-button-primary" form="valid-submit-form" onclick="saveConnection();">Add</button>
                <button id="dialog-close-button" class="aui-button aui-button-link">No</button>
            </div>
            <div class="aui-dialog2-footer-hint"></div>
        </footer>
      </form>
    </section>

sfbehnke · March 17, 2020, 4:12pm

open a new question instead of bumping this six month old one