creating a mandatory field in ui page?

[caffry]

i have a field which should have mandatory symbol (*) and when i enter the values it should change from red to grey..

<label>Name : </label>

<input type="text" ng-model="name" id="demo"  />

can i use it for the above the code...without using jelly script

[rahulpandey]

Hi,

HTML

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

css

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

client script

document.getElementById('inputLabel').setAttribute("class", "required");// when empty
document.getElementById('inputLabel').setAttribute("class", "notrequired");// when it has value

[caffry]

the asterisk symbol had grey color when i run both the required and not required.. one

when i use only required it shows me red asterisk 

use of only required

use of required and not required

[rahulpandey]

That is correct behaviour.

You will run the 'notrequired' code only if that field has some value.

below won't go together.

document.getElementById('inputLabel').setAttribute("class", "required");// when empty
document.getElementById('inputLabel').setAttribute("class", "notrequired");// when it has value

[caffry]

i used the below code
it didnt work

if(gel(inputLabel).value=="")
	{
gel('inputLabel').setAttribute("class", "required");
	}
else
	{
		gel('inputLabel').setAttribute("class", "notrequired");
	}
	

[rahulpandey]

Hi, 

You are using wrong document id. inputLabel is id of the label, which will never have the value however, demo is the correct id of the element which is type input. 

if(gel(demo).value=="")
	{
gel('inputLabel').setAttribute("class", "required");
	}
else
	{
		gel('inputLabel').setAttribute("class", "notrequired");
	}