How to make textarea and select box mandatory in UI page on click of a button in the same UI page?

[Shruthi2]

Hi,

How to make textarea and select box mandatory in UI page on click of a button in the same UI page?

can anyone help me with this ?

Thanks

[Pranav Bhagat]

Hi Shruthi

Add the required attribute

example

 <input type="text" id="username" name="username" required>

If this doesn't work you can use the client script like below

if(gel('ID').value==''){//input the id of the field


alert("fieldname is mandatory is mandatory.");

There is another way also to do it 

Here is the full code

HTML

<label for="input1" id="inputLabel" >Name</label>
  <input type="text" ng-model="name" onchange="checkMandatory()" id="demo"  />

Client script

document.getElementById('inputLabel').setAttribute("class", "required");

function checkMandatory(){
if(document.getElementById('demo')!="")
document.getElementById('inputLabel').setAttribute("class", "notrequired");

}

CSS

label.required::before {
  content: '*';
  margin-right: 4px;
  color: red;
}
label.notrequired::before {
  content: '*';
  margin-right: 4px;
  color: grey;
}

Reference Links

https://community.servicenow.com/community?id=community_question&sys_id=c217a403db31a3406c1c02d5ca961936

https://community.servicenow.com/community?id=community_question&sys_id=83764325db1cdbc01dcaf3231f961993

Regards

Pranav

[Ankur Bawiskar]

Hi Shruthi,

You will have to check it via script in the client script when user clicks on the button

Regards
Ankur

[Shruthi2]

you mean to say if its empty thru document.getElementById()? can u explain it in detail, or help me with code snippet

Thanks

[Ankur Bawiskar]

Hi,

yes you will have to check if the html id is having any value or not

Sample below

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>
		<table border="0" width="100%">
			<tr>
				<td>
					<input type="text" name="reason" id="reason"></input>
				</td>
				<td>
					<textarea id="my_text_area" name="comments"></textarea>
				</td>
				<td>
					<select name="cars" id="cars">
						<option value="">None</option>
						<option value="toyota">Toyota</option>
						<option value="mercedes">Mercedes</option>
						<option value="audi">Audi</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<g:dialog_buttons_ok_cancel cancel="return onCancel();" ok="return onSubmit();"/>
				</td>
			</tr>
		</table>
	</g:ui_form>

</j:jelly>

Client Script:

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

function onSubmit() {
	var textAreaValue = gel('my_text_area').value;
	if(textAreaValue == ''){
		alert('Please provide text area');
		return false;
	}
	if (document.getElementById('cars').value == '') {
		alert('Please select drop down');
		return false;
	}
	return true;
}

Regards
Ankur