gel is not working in ui page

[Susmitha14]

I have created a UI page with textarea amd in client script I have written that when text area is empty it should show an alert box.But even text area is empty it is returning true.Help me on this?

HTML:

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

<g:ui_form>

<div class="row">
<div >
<span style="padding:16px;font-weight:bold;">What were you attempting to do when the performance issue occurred?</span>
</div>
</div>
<div class="row">
<div class="form-horizontal">
<div class="form-group" style="margin-left:16px !important;margin-right:16px !important">
<textarea id="comments" name="comments"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<span class="pull-right">

<button class="btn btn-primary" id="ok_button" onclick="actionOK()" style="min-width: 5em;" title="" type="submit">
Send Email
</button>
</span>
</div>
<input type="hidden" id="kbSysID" name="kbSysID" value="${sysparm_sysID}"/>
</g:ui_form>

</j:jelly>

clientscript:

function actionOK() {

alert("entered");
var value = gel('comments').value;
alert(value);
if (value != '') {
alert("comments filled");
return true;

} else {
alert("please fill");
return false;
}
}

[Harsh Vardhan]

if still you having an issue , can you try with below script.

HTML

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

	
	<g:ui_form>
	<!-- Get values from dialog preferences passed in -->
	<!-- Set up form fields and labels -->
	<table width="100%">
		<tr id="description_row" valign="top">
			<td colspan="2">
				<!-- Short description value used as a label -->
				<p> Community Test </p>
			</td>
		</tr>
		<tr>
			<td>
				<!-- Comments text field (Contains comments from originating record as a default) -->
				<g:ui_multiline_input_field name="dial_comments" id="dial_comments" label="Additional comments" value="" mandatory="true" />
			</td>
		</tr>
		<tr>
			<td colspan="2">
			</td>
		</tr>
		<tr id="dialog_buttons">
			<td colspan="2" align="right">
				<!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons.
	'ok' option will call the 'validateComments' Client script function from the UI Page-->
				<button onclick="validateComments()">Click me</button>
			</td>
		</tr>
	</table>
</g:ui_form>
	
</j:jelly>

UI Page Client script

function validateComments() {
	//Gets called if the 'OK' dialog button is clicked
	//Make sure dialog comments are not empty
	var comments = gel("dial_comments").value;
	comments = trim(comments);
	if (comments == "") {
		//If comments are empty stop submission
		alert("Please provide comments to submit the dialog.");
		return false;
	}

	else{
		alert('filled');	
	}
	//If comments are not empty do this...
	GlideDialogWindow.get().destroy(); //Close the dialog window
	g_form.setValue("comments", comments); //Set the 'Comments' field with comments in the dialog
}

Reference: 

https://www.servicenowguru.com/system-ui/glidedialogwindow-advanced-popups-ui-pages/