Highlight 'Required' fields in code

Scriptcase 9 General
#1

Hello Devs,
I’m wondering if there is a way to identify the ‘Required’ fields on a form in the code, so they can be highlighted dynamically in an event.
Thanks for your input.

#2

different clients will require different fields be ‘required’, thus the need to do this in event code.
Thanks for any ideas you might have.

#3

Put the code in the OnValidate event

if ( $client == "Client1 ) {
if ( empty( {myfield} ) {
sc_error_message( "Hey Client1 you need to fill this field ");
}
}

#4

Thanks for your response Vincenzo,
This would work, on clicking the SAVE.
I would like to also HIGHLIGHT the field, by changing the background color to YELLOW if possible. Or setting the label color to RED.
Is this possible?
Thanks

#5

you could put some code in OnScriptinit or OnLoad, like this:

if ( true ) {

?>
<script>
$( document ).ready(function() {
	$("#id_sc_field_name").css("background-color", "yellow");
	$("#id_label_name").css("background-color", "yellow");
});
</script>

<?php
}

writing code in OnScriptinit maybe gives some problems in navigation, make some tests.
#id_sc_field_filedname is the input box id_label_fieldname is the label, now you can control which field change.

#6

Good day Vincenzo,
This works perfectly!
This not only solves my issue but opens up other possibilities.
Thank you very much!

1 Like
#7

Now I have another question please.
How can I identify in code, all the required fields? And run this code for each field?
Thank you.

#8

I don’t know, I haven’t see any class or other to identify input fileds required.

#9

There is this in the page source:
“class=“scFormRequiredMarkOdd””
in the label section of a field that is REQUIRED.
Then several line thereafter there is:
id=“id_sc_field_fieldname” that goes with the above label w/ the Required class.

I don’t know how to do it but I believe there is a way to start at the scFormRequireddMarkOdd class, proceed looking for the id=“id_sc_field_fieldname” and use that to perform the highlight.
I just don’t know enough about JQuery and JS to make it happen. But I will be looking into it to see if we can make this happen.
Open for any input you all may be able & willing to contribute.
Thanks

#10

try this js function

	// $( ".scFormRequiredMarkOdd" ).closest('td').css( "border", "3px solid red" );

	$( ".scFormRequiredMarkOdd" ).closest('td').each( function( ) {
		var idtd = this.id;
		if ( idtd.includes( 'hidden_field_data_') ) {
			var fldid = 'id_sc_field_' + idtd.replace('hidden_field_data_','' );
			$("#"+fldid).css("background-color", "yellow");
		}
	} );
#11

Hello Vincenzo,
This is some really neat js coding.
I only had to change one thing to get it to work. I changed the ‘hidden_field_data’ to ‘hidden_field_label’ and the code works for fields where the Labels are on the same line as the field. It doesn’t work for fields that have the labels above the field.
I haven’t found a way to make work for both layouts yet but I will keep looking.
Thanks for giving this direction.

1 Like
#12

Hello JS devs,
Vencenzo was kind and provided the above js code that works for input fields that are in blocks with the label position ‘Beside’.
But this line: $( “.scFormRequiredMarkOdd” ).closest(‘td’).each( function( ) {
fails to find fields that are in blocks with labels set to display ‘Above’.
I am pretty ignorant when it comes to JS but I have been trying everything I can think of to get this to work.
Any ideas or direction would be greatly appreciated.
Thanks