Validating form fields - setting textarea CSS with javascript

[Anna Gitarts]

I'm have some trouble getting my validation javascript to work with a textarea. It works fine with the text inputs, just not the textarea for some reason. It looks like this:

The problem seems to be that the js is applying to the parent div of the text/textarea inputs rather than the inputs themselves. I haven't been able to find a way to bypass this and directly call the inputs. Is there anything I can do?

[Oleg Danchenkov]

What JS code do you use to highlight inputs and textarea?

[Anna Gitarts]

Hi Oleg,

This is what I'm using:

codefunction validateForm() {
// Style for form elements that are valid.
var okStyle = {
"border": "1px solid #328cc7"
};

Code: Select all

 // Style for form elements that are invalid. 
 var badStyle = { 
     "box-shadow": "inset 0 0 3px 2px #ff6666" 
 }; 

 // Check that the form is valid. 
 var isValid = function () { 
     var namev  = name.val(); 
     var emailv = email.val(); 
     var hdidv  = hdid.val(); 
     var widv   = wid.val(); 
     var commentsv   = comments.val(); 

     if (namev != "" && (emailv != "" || hdidv != "") && widv != "" && commentsv != "") { 
         return true; 
     } else { 
         return false; 
     } 
 }; 

 // Get handles to the form elements. 
 var name       = $("[name='Name']"); 
 var email      = $("[name='Email']"); 
 var hdid       = $("[name='hdid']"); 
 var wid        = $("[name='workorder']"); 
 var comments   = $("[name='Comments']"); 

 // Assume everything is correct. 
 name.parent().css(okStyle); 
 email.parent().css(okStyle); 
 hdid.parent().css(okStyle); 
 wid.parent().css(okStyle); 
 comments.parent().css(okStyle); 

 if (!isValid()) { 
     if (name.val() === "") { 
         name.parent().css(badStyle); 
     } 
     if (email.val() === "" && hdid.val() != "") { 
         email.parent().css(badStyle); 
     } else if (email.val() != "" && hdid.val() === "") { 
         hdid.parent().css(badStyle); 
     } else if (email.val() === "" && hdid.val() === "") { 
         email.parent().css(badStyle); 
         hdid.parent().css(badStyle); 
     } 
     if (wid.val() === "") { 
         wid.parent().css(badStyle); 
     } 
     if (comments.val() === "") { 
         comments.parent().css(badStyle); 
     } 
     return false; 
 } else { 
     return true; 
 } 

}
/code

I also tried to use just "border", but it had the same problem. It doesn't really matter which one we use.

Thanks,
Anna

[Anna Gitarts]

Any suggestions for this?

[Kateryna Grynko]

Hi Anna,

Sorry, no news yet, we'll update.

[Anna Gitarts]

Thanks, Katya!

[Kateryna Grynko]

Please replace codecomments.parent().css(okStyle);/codewith the next code:codecomments.css(okStyle);/code
and replace codecomments.parent().css(badStyle);/codewith the following:codecomments.css(badStyle);/code

[Anna Gitarts]

Hi Katya,

Wow, thank you so much! That seems way too easy, ha ha.

Thanks again,
Anna

[Chris McKenna6917608]

How / Where do you run this code and then how do you tell it to invoke the service?

[Chris McKenna6917608]

I figured out my own question.

for others that might be looking for this:

On click --- Run JavaScript

Script something like the above

add

yourservicename.execute(); if validation is true.