Change color of fields. Select all fields of a class

[Phoenix]

Hi There


I have 2 questions:

I'm trying to add a CSS class to multiline plain textareas when another field changes. I tried all the following CSS selector, but it won't change:
.required textarea {

border: 2px solid #AA88FF;

background-color: #FFEEAA; }

.required input[type='text'] {

....

}

.required input {

.....

}

.required .ms-rtefield {

...

}


Code handling:

fd.field('Scope').change(function(){

if (val != 1) {

fd.field('Scope_x0020_Txt').titleRequired(true);

fd.field('Scope_x0020_Txt').addClass('required');

} });


2. My second question: Is it possible to lets say handle all the fields with a certian class? I was thinking of

$('#required').each(function () {

If field('xyz').value() == '';

}


is it possible?


Thanks a lot for the reply.,.

[Dmitry Kozlov]

Hi,

1. What type of multiline text field do you use: Plain text, Rich text, or Enhanced rich text?

2. Please, use the code below:

Code: Select all

$.each($('[fd_name]'), function() { 
    if (fd.field($(this).attr('fd_name')).value() == '') {
        ...
    }
})

[Phoenix]

Hi dimitri


Thanks for the fast reply. I use a plain textarea.


Considering the "Each" function. With your code it looks like i have to check for each field (FD_NAME) ? Cant't i generally loop through all the fields of a certain class?

[Dmitry Kozlov]

Please, use the following code to assign an additional CSS class to the field's control:

Code: Select all

fd.field('Scope_x0020_Txt').control()._el().addClass('required');

Regarding the loop through the fields, do you need to loop through a particular type of fields? If so, what type?

[Phoenix]

Thanks, this actually works.


Well I sort of would like to check, when user clicks the submit button, if any field has the the class 'required' and if the send an alert to fill in this field. Dunno if this is possible.

[Dmitry Kozlov]

Please use the following code:

Code: Select all

var alertMessage;
$.each($('[fd_name]'), function() { 
    if ($(this).find('.required').length > 0 /**if needed add here a check for emptiness of your fields, field names are retrieved by $(this).attr('fd_name')**/) {
		if (alertMessage == undefined) {
			alertMessage = "Please fill in the following fields: \n";
		}
        alertMessage += fd.field($(this).attr('fd_name')).titleText() + "\n";
    }
})
if (alertMessage != undefined) {
	alert(alertMessage);
}

If you need to check if your required fields are empty, you'll need to insert respective checks in place where my comment is. Please note, that different field types' values are retrieved differently.

[Phoenix]

Thanks I will try that. Just to be clear... i do not have to replace fd_name..?

[rostislav]

No, you don't.

[Phoenix]

Thanks, I'm sorry I get i know.


Your code works fine thank you. Though I have another question related to your code:

alertMessage += fd.field($(this).attr('fd_name')).titleText() + "\n";

I always get blanc, although I have set a Title value in the form editor, do I have to add a title in code as well?

The css is working fine for the plain textarea, I tried to apply it to a choice field (dropdownbox) with

.required select

Is this wrong?

[rostislav]

No you don't have to change title using code. Are you using exactly the code we provided or have you maybe added your own stuff, e.g. conditional statements?

The css selector for a dropdown is exactly what you thought it was. E.g.

.required select {

background-color: #FFEEAA;

}

would do the trick.


If you're using the code we sent you and it doesn't work, please send us the source code of your page (e.g. in Chrome right click -> View page source) to support@spform.com and we'll try to replicate your issue.