Locking Down Max Lines on Input Field Based on Characters

Hi all,

Wondering if someone can offer me some assistance.

I am currently creating a form that adds new addresses. My data structure is the following:

  • Id
  • AddressName
  • Address
  • IsActive

The 'address' attribute needs to be unstructured. It can only contain max 4 lines and each line can only have 35 characters.

What is the best way to validate this? The validation will need to be on the client-side. And I assume that I will need to write some code for this to work.

Can anyone help?

Thanks,

Asha

Hi Asha,

If you need it to be client-side, I'd write a Javascript function and bind it to the onblur event of the field. If the value of the input is not valid according to your rules (you could count the number of newline characters to know if you've reached 4 lines and split each line to know if they're over 35 characters), it could disable your submit button until a valid value is written.

If this is the only client-side validation you're planning, you can write a solution and keep it contained, but if you're considering other custom client-side validations for your inputs, I'd recommend a library like jQuery Validate - I've just used it on a client project where we required complex client-side validations (fiscal numbers, IBAN check digits, etc) and it served our needs perfectly.

Can I ask why you can't consider server-side validation? By moving your logic into custom Javascript, you'll be losing a lot of speed and making your code harder to maintain.

The Address is 140 chars max length 

Get the length of the final text, divide it by 35 and use Abs() to get the number without the decimals: 

Abs( ( length( Address ) ) /4 ) = this is the number of line breaks needed

Now you can have a switch and in each branch of the switch you can build you final string the way you want it.

For example, if you detect that there are 4 line breaks (full 140 char string) your switch branch can do something like this:



Hope it helps!

Afonso Carvalho wrote:

Hi Asha,

If you need it to be client-side, I'd write a Javascript function and bind it to the onblur event of the field. If the value of the input is not valid according to your rules (you could count the number of newline characters to know if you've reached 4 lines and split each line to know if they're over 35 characters), it could disable your submit button until a valid value is written.

If this is the only client-side validation you're planning, you can write a solution and keep it contained, but if you're considering other custom client-side validations for your inputs, I'd recommend a library like jQuery Validate - I've just used it on a client project where we required complex client-side validations (fiscal numbers, IBAN check digits, etc) and it served our needs perfectly.

Can I ask why you can't consider server-side validation? By moving your logic into custom Javascript, you'll be losing a lot of speed and making your code harder to maintain.

This sounds like a good but complex idea ha! I wanted client-side validation due to the user experience. I want to allow the user to see if they have maxed out the limit in real time in the form. 

From the sounds of it, maybe this isn't the best option for me! But I will considered! Thanks a bunch :)


Filipe Silva wrote:

The Address is 140 chars max length 

Get the length of the final text, divide it by 35 and use Abs() to get the number without the decimals: 

Abs( ( length( Address ) ) /4 ) = this is the number of line breaks needed

Now you can have a switch and in each branch of the switch you can build you final string the way you want it.

For example, if you detect that there are 4 line breaks (full 140 char string) your switch branch can do something like this:



Hope it helps!

Hey Filipe, 

Thanks for your reply! This will work, but it would tell the user if they have maxed out the line character limit whilst they are filling out the form right?


Asha Vadher wrote:

Filipe Silva wrote:

The Address is 140 chars max length 

Get the length of the final text, divide it by 35 and use Abs() to get the number without the decimals: 

Abs( ( length( Address ) ) /4 ) = this is the number of line breaks needed

Now you can have a switch and in each branch of the switch you can build you final string the way you want it.

For example, if you detect that there are 4 line breaks (full 140 char string) your switch branch can do something like this:



Hope it helps!

Hey Filipe, 

Thanks for your reply! This will work, but it would tell the user if they have maxed out the line character limit whilst they are filling out the form right?


If you use the steps I posted in the OnChange event handler of the input widget of Address, this action will run every time the input changes, so

In each branch of the switch:

you can add the line breaks to the Address variable and they will be visible in the input field, 

you can add an assignment where you can display whatever message you want to show the user, a line counter, a text message or even both (you need to use extra widgets to display these) 

My advice is to try things out! See what's possible! :) 

Asha Vadher wrote:

This sounds like a good but complex idea ha! I wanted client-side validation due to the user experience. I want to allow the user to see if they have maxed out the limit in real time in the form. 

From the sounds of it, maybe this isn't the best option for me! But I will considered! Thanks a bunch :)

No problem. While the user experience is important and enhanced by client-side validations, creating complex rules there usually requires writing and maintaining additional Javascript code, and the tradeoffs are sometimes not worth it!

Writing something server-side for the onchange handler like Filipe suggests might be less performant since data will need to travel between client and server more often, but it will be easier to create and test. I'd start there with a simple rule and then test the impact for the user.