How to make fields mandatory in UI page

[patSnow]

Hi  Team,

How to make fields mandatory in UI page. I have tried "required" but still its not showing as required fields with *.

HTML:

<g:ui_form>
<input type="hidden" id="vulId" name="vulId" value="${sysparm_sys_id}"/>

<div class="modal-body">

<div class="row form-section">
<label for="short_desc" class="col-sm-3 section-title-top">${gs.getMessage('Describe the end user impact in "Production environment" from their daily work perspective. For example what functionalities are being affected as part of this service/application being unavailable or degraded?')}</label>
<div class="col-sm-9 section-title-top" >
<textarea id="short_desc" aria-label="${gs.getMessage('Short description')}" class="col-sm-9 form-control" type="text" name="short_desc" ></textarea>
</div>
</div>

<div class="row form-section">
<label for="radio_field_main" id="radio_field_main" name="radio_field_main" class="col-sm-3 section-title-top">${gs.getMessage('Are any workarounds available to the users?')}</label>
<div class="col-sm-9 section-title-top">
<input type="radio" id="radio_field1" style="min-width: 2em" value="Yes" name="radio_field" onclick="checkValue1();"></input><label for="radio_field1">Yes</label>
<input type="radio" id="radio_field2" style="min-width: 2em" value="No" name="radio_field" onclick="checkValue2();"></input><label for="radio_field2">No</label>
</div>
</div>

<div class="row form-section">
<label for="date_field" class="col-sm-3 section-title-top">${gs.getMessage('When did the issue start')}</label>
<div class="col-sm-9 section-title-top">
<g:ui_date_time name="project_start_date" value="${jvar_start_date}"/>
</div>
</div>

<div class="row form-section">
<label for="desc" class="col-sm-3 section-title-top">${gs.getMessage('Which territories are impacted?')}</label>
<span class="col-sm-9 section-title-top">
<textarea id="desc" aria-label="${gs.getMessage('Description')}" class="col-sm-9 form-control" rows="3" type="text" name="desc" ></textarea>
</span>
</div>

<div class="row form-section" >
<label for="users_impacted" class="col-sm-3 section-title-top" >${gs.getMessage('How many users are impacted, both now and potentially?')}</label>
<div class="col-sm-9 section-title-top" >
<textarea id="users_impacted" aria-label="${gs.getMessage('Short description')}" class="col-sm-9 form-control" type="text" name="users_impacted">No. of users impacted now -
No. of potential users impacted -</textarea>
</div>
</div>

</div>
<footer class="modal-footer">
<!-- <g:dialog_buttons_ok_cancel ok="return onSubmit();" cancel="return onCancel();"/> -->
<button class="btn-default btn" style="min-width: 5em" onclick="return onCancel();" name="cancel" id="cancel">${gs.getMessage('Cancel')}</button>
<button class="btn-primary btn" name="submit" onclick="onSubmit();" id="submit" style="min-width: 5em">${gs.getMessage('Submit')}</button>
</footer>
</g:ui_form>

Client script: 

function onCancel() {
GlideDialogWindow.get().destroy();
return false;
}

function onSubmit() {
var short_desc = gel("short_desc").value;
var date = gel("project_start_date").value;

------------- ----- -----

GlideDialogWindow.get().destroy();

}

[VerdaKosnett1]

            <div class="form-group is-required row">

                <label class="col-sm-3 control-label" style="text-align:right" required="required" aria-required="true" for="suspend_reason"><span class="required-marker"></span>${gs.getMessage('Reason')}  </label>

                <span class="col-sm-9">

                    <select id="suspend_reason" class="form-control" name="suspend_reason" required="required" aria-required="true">

                        <option value=''>-- select a reason --</option>

                        <j:while test='${reasons.next()}'>

                            <j:if test="${reasons.getValue('value') == suspension_type}">

                                <option value="${reasons.getValue('value')}" selected='selected'>${reasons.getValue('label')}</option>

                            </j:if>

                            <j:if test="${reasons.getValue('value') != suspension_type}">

                                <option value="${reasons.getValue('value')}">${reasons.getValue('label')}</option>

                            </j:if>

                        </j:while>

                    </select>

                </span>

            </div>