How to add a required attribute to select html element in Jelly script

[rita_m]

Hi - 

I am creating a form in a new UI action in service now.

This form has several selects in it.

How can I set the select's "required" attribute on this form using jelly scripting?

<g:evaluate var="jvar_required" jelly="true">
var jvar_required;
if ( jelly.jvar_test_condition_string =="true"){
jvar_required = "required";
} else jvar_required = "";
jvar_required;
</g:evaluate>


<select id="question_${jvar_assessmentQuestions.questionMeticDefSysID}"  ${jvar_required}>
<option value=''> -- None -- </option>
...etc for other options
</select>

I am getting this error: 

Error at line (80) Attribute name "jvar_required" associated with an element type "select" must be followed by the ' = ' character.

If I could just change this to use the mandatory=true or false tag, it'd be easy.  I'd change the required string to read either true or false, my code would be mandatory="${jvar_required}". But I can't do that because I can't pull that the "mandatory" attribute in the client script since it's not a valid attribute for select form elements. (It shows as "undefined" in my alert)

I CAN pull the "required" attribute, tho, and have tested it's working by manually setting the required tag for a few html elements using developer tools and having the following in the client script.

for (var i = 0; i < allQuestionIDsArray.length; i++) {
        allSelectedValuesArray[i] = gel("question_" + allQuestionIDsArray[i]).value;
	alert(gel("question_" + allQuestionIDsArray[i]).required);
}

Any suggestions on how to set the select "required" attribute in jelly?

I believe I could do a client script loop on load to set all them using dom manipulation, but it's not ideal. 

(see client script here: https://www.servicenow.com/community/itsm-forum/how-to-make-textarea-and-select-box-mandatory-in-ui-...)

Does anyone know a better way?

Much thanks!

[AnveshKumar M]

Hi @rita_m ,

Can you try like this.

<j:choose>

   <j:when test="${jvar_required=='required'}">

<select id="question_${jvar_assessmentQuestions.questionMeticDefSysID}" required>

</j:when>

   <j:otherwise>

<select id="question_${jvar_assessmentQuestions.questionMeticDefSysID}">

</j:otherwise>

</j:choose>

<option value=''> -- None -- </option>

...etc for other options

</select>

Please mark my answer helpful and accept as a solution if it helped 👍✅

[rita_m]

REALLY good thought, and I gave it a try.

2 things came of that:

1) It still didn't work and had the same error... 

Error at line (80) Attribute name "required" associated with an element type "select" must be followed by the ' = ' character.

Apparently ServiceNow cannot use standard HTML attributes for form selects elements.  Good to know!

2) I couldn't save it even after changing it to required="true" because there was a new 

Error at line (83) The element type "select" must be terminated by the matching end-tag "</select>".

error at the end.  Looks like SN doesn't allow conditional element additions unless both the start AND end of the tag are within the condition. Or I'd need to build conditional tags for the ending components, even tho they're both identical.

I did ultimately find a way to make it work:

<g:evaluate var="jvar_required" jelly="true">
   var jvar_required;
   if (jelly.jvar_assessmentQuestions.mandatory=="true"){
      jvar_required = "true";
   } else jvar_required = "false";
   jvar_required;
</g:evaluate> 

<select id="question_${jvar_assessmentQuestions.questionMeticDefSysID}" style="width:100%" >
<script>
   if ("${jvar_required}" == "true")
      gel("question_${jvar_assessmentQuestions.questionMeticDefSysID}").required = true; 
 </script>
   <option value=''> -- None --   </option>
   <j:forEach var="jvar_option" items="${jvar_assessmentQuestions.options}">
      <option value = "${jvar_option.value}"> ${jvar_option.display} </option>
   </j:forEach>
</select>

And the client script:

for (var i = 0; i < allQuestionIDsArray.length; i++) {
	allSelectedValuesArray[i] = gel("question_" + allQuestionIDsArray[i]).value;
	elem = gel("question_" + allQuestionIDsArray[i]);
	alert(elem.required);
}

Thanks so much for your suggestion!  

[AnveshKumar M]

Hi @rita_m 

Another best way for select box in is using jelly variant of select. That is ui_choice_input_field. The following are the various attribute sfor it and mandatory is one of them.

Attributes: 

name= name of the input field

label=the label of the field

value= initial value of the field

onkeyup=the javascript to call onkeyup

onchange=the javascript to call onchange

onclick_label=the javascript to call onclick of the label

mandatory=whether or not this field is madatory, defaults

to false

<g:ui_choice_input_field id="choice_id" name="choice_name" label="${gs.getMessage('Select Option')}"> <option value="none">${gs.getMessage('--None--')}</option> <option value="1">1</option> 

<option value="2">2</option> <option value="3">3</option> </g:ui_choice_input_field>

</j:jelly>

Try this one with the conditions in it.

Please mark my answer helpful and accept as solution if it helped 👍✅

[Maik Skoddow]

Hi @rita_m 

Jelly is an XML-based language and in XML setting only an attribute ("required") without any value is not allowed as it is in HTML. 

Instead of 

jvar_required = "required"

write

jvar_required = 'required="required"'

Maik