Making a field in UI page mandatory

[SamiranD]

I want to make a field mandatory in an UI Page and by using required tag it is not working. Any workaround? maybe some javascript code or any other thing?

[GopikaP]

Hi @SamiranD Can you try this with your field- 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	<div style="padding:21px">
		<table>
			<tr>
				<td style="width:25%">
					<g:form_label>
						Text Field
					</g:form_label>
				</td>
				<td style="width:60%">
					<textarea id="text_field" name="text_field" class="form-control" spellcheck="true" rows="6" cols="65" required="required"></textarea>  <!-- required attribute is not working -->
					<span style='color: red;' id="error_msg" class="outputmsg_text"></span>
				</td>
			</tr>
		</table>
	</div>
	
	<div style="padding:5px;float:right">
		<g:dialog_buttons_ok_cancel style="padding:5px;margin-right:10px" ok_id="submitData" ok="return OnSubmit()" oh_type="button" ok_text="${gs.getMessage('Submit')}" ok_style_class="btn btn-primary"/>		
	</div>
	
</j:jelly>

and client script - 

function OnSubmit() {
    var changeDetails = gel('text_field').value;
    changeDetails = changeDetails.toString();
    if (changeDetails == ' ') {
        $j('#error_msg').html(getMessage('Please fill the field'));
        gel('error_msg').show();
        return false;
    } else {
        GlideDialogWindow.get().destroy();
        window.location.reload();
    }
}