Required Fields Scenario

[Vinay Muppidi]

Hi..

I've a very common use case scenario where in the required fields should be bordered red and when users fill them and go to next field the border should be colored something else like black etc. This will let users know what fields they've missed to fill very easily when they submit. This is very intuitive.

So am using the onchange function for each required field to see if the field is empty or not.

1. I tried this fd.field('Is_x0020_ECN_x0020_Submitted').style('border:black'), but this did not work. Can you please tell me what is the correct syntax?

2. Can we write just one function to handle this and call this function from all 'onchange' functions of required fields?


Thank you..

[Dmitry Kozlov]

1. Please, define the following classes in CSS-editor of Forms Designer:

Code: Select all

.black-border input[type="text"],
.black-border select,
.black-border textarea {
	border: 1px solid Black;
}

.red-border input[type="text"],
.red-border select,
.red-border textarea {
	border: 1px solid Red;
}

Next, assign them via JavaScript following way:

Code: Select all

//assign 'red-border' class
fd.field('ContentType').control()._el().removeClass('black-border').addClass('red-border');

//assign 'black-border' class
fd.field('ContentType').control()._el().removeClass('red-border').addClass('black-border');

2. Sure, just define JS-function and call it from each onchange handler.

[Vinay Muppidi]

Thanks Dmitry, these forms are really helpful!