How to make ui_reference control mandatory in UI Page?

[Jim Coyne]

I'm using the "required="required"" tag for some text boxes and that works fine for them, but I need to make sure the Reference field is populated before closing the window.

I've already tried:

mandatory="true"
mandatory="mandatory"
required="true"
required="required"
aria-required="true"

No luck with any of them.

I figured that doing something like:

function actionOK(){
  //perform whatever test here
  if (whatever) {
    return false;
  }
}

...would stop the submit, but it doesn't.

[Pratiksha Kalam]

Hello

You can  try with mandatory="true" or required

 Example :<g:ui_reference name="${ref_table}_ref" id="${ref_table}_ref" table="${ref_table}" query="${query}" completer="AJAXTableCompleter" mandatory="true" aria-required="true"/>

If answer is helpful mark correct!

Thanks,

Pratiksha

[Jim Coyne]

I had already tried:

mandatory="true"
mandatory="mandatory"
required="true"
required="required"
aria-required="true"

No luck with any of them.

[Jim Coyne · Accepted solution]

OK, finally got it working.

I had been using the following for the OK/Cancel buttons:

<button class="btn btn-default" id="cancel_button" onclick="window.GlideModalForm.prototype.locate(this).destroy(); return false" style="min-width: 5em;" title="" type="submit">
  Cancel
</button>
<button class="btn btn-primary" id="ok_button" onclick="actionOK()" style="min-width: 5em;" title="" type="submit">
  OK
</button>

...so I switched to this instead:

<g:dialog_buttons_ok_cancel ok="return actionOK();" cancel="window.GlideModalForm.prototype.locate(this).destroy(); return false"/>

So the actionOK() function is check to see if the field has something in it and if not will "return false;" which now keeps the window open until the user selects an item.