How to make UI Page field mandatory

Novin Ramteke · ‎08-17-2023

I have created an alert/pop-up "Add Change Details" using UI Page, which appears on button click. I want to make the "Change Details" field mandatory. I have tried adding the required attribute in the HTML tag, but that didn't work. Please suggest possible solutions.

Following is the HTML code of UI Page :

<?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>
						Change details
					</g:form_label>
				</td>
				<td style="width:60%">
					<textarea id="change_details" name="change_details" class="form-control" spellcheck="true" rows="6" cols="65" required="required"></textarea>  <!-- required attribute is not working -->
					
				</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>

Following is the Client Script of UI Page :

function OnSubmit() {
    var gdw = new GlideDialogWindow.get();
    var changeDetails = gel('change_details').value;
	changeDetails = changeDetails.toString();
    if (changeDetails == '') {
        emptyDetailsErrorMessage(); //Not Working
    } else {
        var AssessmentId = gdw.getPreference('sys_id');
        var AssessmentRecord = new GlideAjax('EPS_MakeChanges');
        riskAssessmentRecord.addParam('sysparm_name', 'makeChanges');
        riskAssessmentRecord.addParam('sysparm_respo_id', ChangeDetails);
        riskAssessmentRecord.addParam('sysparm_record_id', AssessmentId);
        riskAssessmentRecord.getXML(checkChangeDetailsAdded);
    }
}

function checkChangeDetailsAdded(response) {
    var answer = response.responseXML.documentElement.getAttribute("answer");
    if (answer == "updated") {
        changeDetailsAdded();
        GlideDialogWindow.get().destroy();
        window.location.reload();
    }
}

function emptyDetailsErrorMessage() {
    GlideDialogWindow.get().destroy();
    g_form.addErrorMessage('Please provide Change details.');
}

function changeDetailsAdded() {
    g_form.addInfoMessage('The Change details are added in Activity Journal.');
}

Sohithanjan G · ‎08-23-2023

Hi @Novin Ramteke

You can use this to display as star. Mark as accepted if this give you solution

<head>
<style>
.input-container {
  position: relative;
}

.star-indicator {
  color: gray;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.star-indicator.required {
  color: red;
}
</style>
</head>
<body>

<div class="input-container">
  <label for="change_details">Change Details</label>
  <textarea id="change_details" name="change_details" class="form-control" spellcheck="true" rows="6" cols="65" 
  style="position: relative;"
  oninput="if (this.value.trim() === '') {document.querySelector('.star-indicator').style.color = 'red';} else {document.querySelector('.star-indicator').style.color = 'gray';}">
  </textarea>
  <span class="star-indicator" style="color: gray; position: absolute; top: 0.5rem; right: 0.5rem;">*</span>
</div>

</body>

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)

View solution in original post

Sohithanjan G · ‎08-18-2023

Hi @Novin Ramteke

Change Your HTML Tag: Instead of using the required attribute, you can use JavaScript to validate the field before submitting the form. In your textarea tag, remove the required="required" attribute:

<textarea id="change_details" name="change_details" class="form-control" spellcheck="true" rows="6" cols="65"></textarea>

Update Your Client Script: Modify your OnSubmit() function to include the validation for the "Change Details" field. You can add the following code at the beginning of the function:

function OnSubmit() {
    var changeDetails = gel('change_details').value;
    changeDetails = changeDetails.toString().trim(); // Trim to remove whitespace
    if (changeDetails === '') {
        emptyDetailsErrorMessage();
        return false; // Prevent form submission
    }
    // Rest of your code for successful submission
}

Please mark as correct if it helps.

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)

Novin Ramteke · ‎08-22-2023

Hi @Sohithanjan G ,
The solution you provided was helpful and, now I am able to restrict the user from submitting the UI Page with an empty field value. Thank you. Still looking for a solution where I can make the UI Page field mandatory similar to the normal form field can be made mandatory. Thanks again.

Sohithanjan G · ‎08-23-2023

Hi @Novin Ramteke

You can use this to display as star. Mark as accepted if this give you solution

<head>
<style>
.input-container {
  position: relative;
}

.star-indicator {
  color: gray;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.star-indicator.required {
  color: red;
}
</style>
</head>
<body>

<div class="input-container">
  <label for="change_details">Change Details</label>
  <textarea id="change_details" name="change_details" class="form-control" spellcheck="true" rows="6" cols="65" 
  style="position: relative;"
  oninput="if (this.value.trim() === '') {document.querySelector('.star-indicator').style.color = 'red';} else {document.querySelector('.star-indicator').style.color = 'gray';}">
  </textarea>
  <span class="star-indicator" style="color: gray; position: absolute; top: 0.5rem; right: 0.5rem;">*</span>
</div>

</body>

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)