You are viewing limited content. For full access, please sign in.

Question

Question

Validate field value in forms and display correct format

asked on September 27, 2016 Show version history

Hi All,

I have some standard fields in a form, (last name, first name, middle name, suffix).  I'd like to convert them to title case (brown -> Brown) and display it correctly after the data is keyed.  How can I do this in Forms?

 

Thank you in advance

0 0

Replies

replied on September 27, 2016

Hi Sharon, I think I can do you one better. For each of these fields, add the "capitalizeMe" CSS class in the Advanced tab. Then add this custom CSS:

.capitalizeMe input {text-transform: capitalize;}

Also add this custom JavaScript:

$(document).ready(function() {
  $('.capitalizeMe input').on('change',function() {
    var orig = $(this).val();
    var breakSpaces = orig.split(' ');
    var newWords = new Array();
    $.each(breakSpaces,function(index,word) {
      newWords.push(word.charAt(0).toUpperCase() + word.slice(1));
    });
    $(this).val(newWords.join(' '));
  });
});

The JavaScript is what actually does the heavy lifting; it takes the string value of the input element and separates by space character. Then for each word detected in this string, it capitalizes the first letter. Then it puts the string back together with spaces in between each word. The custom CSS will make this appear to happen as the words are typed into the field.

Note that the CSS is merely a display, so when you apply that it will seem to already be converting to title case, but when the form is saved or when actually dealing with the variables, the actual value would not reflect that display. For that to change you need to apply the JavaScript as well.

Hope this helps!

6 0
replied on July 5, 2023

This worked well for me, thanks! 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.