Strip certain characters

[ctreeves]

I have a form field I want to control what a user can enter.  It's for a blood product unit number.

The format will always be:

W1202 follow by the last 2 digits of the year 14 followed by 6 numbers 123456

Final entry W120214000001.

That is what the unit number will look like - eye readable.  The issue I have is that there is also a barcode and it's obviously easier for staff to enter it accurately if the scan it.

The barcode has start (=) and stop (00) characters, so in this example it would look like =W12021400000100.

Is there a way to detect if the first character is an = and strip it, preferably on the form?  Then, if it is over 13 character and the last 2 character are 00, strip those as well?  And while we are at it, make sure the unit number is a total of 13 consecutive characters? 

Your guidance is greatly appreciated.

[BKBK]

Your use-case implies that all the validation has to take place at the client. That is, at the browser. This therefore calls for Javascript.

The following example does what you want, is simple, and is self-explanatory:

function validateCode() {

        var code = document.getElementById("code").value;

        var is_firstChar_W = code.charAt(0).toUpperCase()=="W";

        var errorMsg = "";

/* Check: If first character is different from 'W' or input code is longer than 13 characters, then there is an error. The code then has to be adjusted. */

        if (!is_firstChar_W || code.length > 13) {

            errorMsg = "Input code modified.";

            if (!is_firstChar_W) {

                code = code.slice(1);

                errorMsg=errorMsg + " First character must be 'W'."

            }

            if (code.length > 13) {

                code = code.substring(0,13);

                errorMsg=errorMsg + " Code must have exactly 13 characters.";

            }

            document.getElementById("code").value = code;

            alert(errorMsg);

        }

        return true;

}

</script>

<form action="actionPage" method="post" name="f" id="f">

<input name="code" id="code" type="text" onblur="validateCode()">

<input name="sbmt" id="sbmt" type="submit" value="Send">

</form>

[ctreeves]

Sorry for the delayed reply, I've been off until now.

Wow, I greatly appreciate this.  I have not tested it yet, but presume (based on your reputation) it will work. 

-------

Update

OK, so not being a JavaScript whiz, I am having trouble reading code / code...

There are instructions that say code = ... and code.variable and you also named the field code.

My field is named Unit.  I tried updating everything that said code to unit, but that failed.  I tried changing the field to code, but it's not working.  I am using a cfform with a cfinput.  I tried changing it to a regular input, still no luck.

I'm sure the issues are all mine.

[BKBK · Accepted solution]

You could try this version:

<script type="text/javascript">

function validateUnit() {

        var unit = document.getElementById("unit").value;

        var is_firstChar_W = unit.charAt(0).toUpperCase()=="W";

        var errorMsg = "";

/* Check: If first character is different from 'W' or input is longer than 13 characters, then there is an error. 'Unit' is then adjusted. */

        if (!is_firstChar_W || unit.length > 13) {

            errorMsg = "Input Unit modified.";

            if (!is_firstChar_W) {

                unit = unit.slice(1);

                errorMsg=errorMsg + " First character must be 'W'."

            }

            if (unit.length > 13) {

                unit = unit.substring(0,13);

                errorMsg=errorMsg + " Unit must have exactly 13 characters.";

            }

            document.getElementById("unit").value = unit;

            alert(errorMsg);

        }

        return true;

}

</script>

<form action="actionPage" method="post" name="f" id="f">

<input name="unit" id="unit" type="text" onblur="validateUnit()">

<input name="sbmt" id="sbmt" type="submit" value="Send">

</form>

[ctreeves]

Thank you, this is perfect!

I did get an error that want me to change "unit" to "Unit", other than that this is exactly what I needed!!!

[BKBK]

I am glad to hear. Best wishes.

[Steve Sommers]

You can do the same check with, to me, less code and more supportability using regular expressions, but that is a user/programmer preference. There is a saying, "solving a problem with a regular expression simply gives you two problems" -- but I don't subscribe to that belief. But no matter which approach you select, you must duplicate the validation code server-side. Client-side validation is for user friendliness -- server-side validation is to keep your application secure and sane.

(Sorry for the late response. I thought I posted this the other day but something screwed up and it was in some auto-save area.)

[ctreeves]

Thanks Steve,

I'm not worried about keeping the application safe or secure.  Yes, I really said that. 

This is for our departments intranet, it's behind our firewall and only a few select people have access.

I'd be curious to see what a regular expression would look like for this, I am always happy to learn,

Thanks again.

[Steve Sommers]

Server-side would look something like this (I took the liberty of validating the year as 14 or 15):

<cfoutput>

  <cfloop index="variables.test" list="W120214000001,W120215000002,W120216000003,W120214000001.1,A120214000001">

   #variables.test# = #reFindNoCase("^W1202(14|15)\d{6}$",variables.test) NEQ 0#<br />

  </cfloop>

</cfoutput>

The regular expression can be easily converted to javascript for client-side validation -- for demo purposes this was quicker for me.