How to make a field mandatory on UI page?

[Moran1]

I have a UI page which presents some information in addition to fields and two buttons. I would like to make one of the input boxes(the one with the url place holder) mandatory if the parameter isparam is true. which means you cant press the button "run" without completing this field. how can i do that? 

here is my code: 

c?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:evaluate var="jvar_action" expression="RP.getWindowProperties().action" />
<g:evaluate var="jvar_device" expression="RP.getWindowProperties().device" />
<g:evaluate var="jvar_param" expression="RP.getWindowProperties().isParam" />
<g:evaluate var="jvar_paramName" expression="RP.getWindowProperties().param" />
<input type="hidden" id="action" name="action" value="${jvar_action}" class="action" />
<input type="hidden" id="device" name="device" value="${jvar_device}" class="device" />
<input type="hidden" id="isParam" name="isParam" value="${jvar_param}" class="isParam" />
<input type="hidden" id="param" name="param" value="${jvar_paramName}" class="param" />
<g:ui_form>
<g:form_label>
<br>Device name $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP]
<input type="text" aria-label="enter value" name="name_of_param" id="device_name" value="${jvar_device}"/></br>
<j:if test="${jvar_param}">
	<br> Please provide the following for the remediation to run </br>
<br> ${jvar_paramName} $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP] $[SP]
<input type="text" aria-label="enter value" name="param_value" id="param_value" placeholder="https://www.aternity.com" value=""/></br>
</j:if>
	<br/>
<br> Clicking run will execute ${jvar_action} with the provided url parameter on ${jvar_device} and the user will get a confirmation message. </br>
	<br></br>
</g:form_label>
	<br/>

<g:dialog_buttons_ok_cancel ok_id="submitdata" ok="return go_ok()" ok_type="button" ok_text="Run" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="canceldata" cancel_style_class ="btn btn-default" cancel="return goCancel()"/>
</g:ui_form>
</j:jelly>

client script: 

function go_ok() {
    var param_value = "";
    var gdw = GlideDialogWindow.get();
    var action = gel("action").value;
    var device = gel("device").value;
    var isParam = gel("isParam").value;
    //alert(isParam);
    if (isParam == "true") {
        param_value = gel("param_value").value;
        //alert(" action " + action + " device " + device + " param " + param_value);

    }
    var ga = new GlideAjax('Remidiation_AJAX');
    ga.addParam('sysparm_name', 'GetParameters');
    ga.addParam('sysparm_inc_details', g_form.getUniqueValue());
    ga.addParam('sysparm_param', param_value);
    ga.addParam('sysparm_action_name', action);
    //if(isParam=="true")
    //	ga.addParam('sysparm_action_name', param);
    ga.getXML(AjaxAnswer);
    GlideDialogWindow.get().destroy();
    return true;
}

function AjaxAnswer(response) {
    var answer = response.responseXML.documentElement.getAttribute("groupinfo");
	alert(answer);
}

function goCancel() {
    var gdw = GlideDialogWindow.get();
    alert("Cancel");
    GlideDialogWindow.get().destroy();

}

[Periyasamy P]

In HTML,

Add this line next to your fields to indicate field is mandatory to fill.

<span class="glyphicon glyphicon-asterisk" style="color:red"></span>

Above button,

<div class="error_message"><span class="glyphicon glyphicon-asterisk" style="color:red"> </span>Fill mandatory info to proceed</div>

Write onload script to toggle visibility mandatory indicator & error message,

$j(".error_message").hide();

var isParam = gel("isParam").value;

if (isParam && isParam == "true"){

   $j(".glyphicon").hide();

}

Then update your go_ok function,

var param_value = "";
var gdw = GlideDialogWindow.get();
var action = gel("action").value;
var device = gel("device").value;
var isParam = gel("isParam").value;

if (isParam && isParam == "true" && (action == "" || device =="") ){

   $j(".error_message").show();
   return false;

}
  

[Moran1]

where do i write the on load script? 

[palanikumar]

Hi,

Try the below script

<g:set_if var="jvar_mandatory" test="${jvar_param == true}" true="true" false="false" /><!-- this toggles jvar_mandatory to true/false -->

<g:ui_input_field label="enter value" name="name_of_param" mandatory="${jvar_mandatory}" value="${jvar_device}" id="device_name" />
<!-- Replace values based on your requirement -->