Validate textbox with client generated button

I have button like this.  It allows comma separated values.  
How can I check to make sure that no individual value is more than 4 characters?
Ideally, I'd like to check that all the values are alpha numeric, but I don't know how to use REGEX in JavaScript.


                   <input id="Button2" type="button" value="Add" 
                    onclick="Javascript:AddItemFromTextBox('ctl00_ContentPlaceHolder1_lstFileNameCode','ctl00_ContentPlaceHolder1_cmbFileNameCode','ctl00_ContentPlaceHolder1_hidfilenamecodecmb','ctl00_ContentPlaceHolder1_hidfilenamecodelst','ctl00_ContentPlaceHolder1_txtFileNameCode2')"; />

Open in new window


It's validated like this.

function AddItemFromTextBox(ListBox,DropDownBox,hiddenCmb,hiddenLst,TextBox) 
 { 

    var Lbox = document.getElementById(ListBox);
    var cmbBox = document.getElementById(DropDownBox);
    var hidcmb=document .getElementById (hiddenCmb);
    var hidlst=document .getElementById (hiddenLst);
    var Tbox = document.getElementById(TextBox); 
    var myStringArray=SplitTheString(Tbox.value);
    //if (SplitTheString(Tbox.value) != null)
    if (myStringArray !=null)
    {       
        for (var i = 0; i < myStringArray.length; i++) 
        {
            var newOption = window.document.createElement('OPTION');
            newOption.text = myStringArray[i];
            newOption.value = myStringArray[i];
            if (myStringArray[i] != "")
            {
                Lbox.options.add(newOption);
            }
        }
    }
    else
    {
        var newOption = window.document.createElement('OPTION');
        newOption.text = Tbox.value;
        newOption.value = Tbox.value;
        Lbox.options.add(newOption);
        Lbox.options.add(newOption);
    }
    persistOptionsListTextBox(Lbox,Tbox,hidcmb,hidlst);
    arrTexts = new Array();

    for(i=0; i<Lbox.length; i++) 
    {
     arrTexts[i] = Lbox.options[i].text;
    }
    Lbox.options.length = 0;
    arrTexts.sort();

    for(j=0; j<i; j++) 
    {
        var newOption = window.document.createElement('OPTION');
        newOption.text = arrTexts[j];
        newOption.value = arrTexts[j];

        Lbox.options.add(newOption);
    }
function SplitTheString(CommaSepStr) {
       var ResultArray = null; 
       var SplitChars = ',';
        if (CommaSepStr!= null) {
            
            if (CommaSepStr.indexOf(SplitChars) >= 0) 
            {
                ResultArray = CommaSepStr.split(SplitChars);
            }
            else if (CommaSepStr != "")
            {
                CommaSepStr+=","
                ResultArray=CommaSepStr.split(SplitChars);
            }
        }
       return ResultArray ;
    }

  function persistOptionsListTextBox(lstfiletypecode,txtfiletypecode,hidfiletypecodecmb,hidfiletypecodelst)
  {
        var optionsList = '';
        var myStringArray=SplitTheString(txtfiletypecode.value);
        //if (SplitTheString(Tbox.value) != null)
        if (myStringArray !=null)
        {       
            for (var i = 0; i < myStringArray.length; i++) 
            {
                 var optionText = myStringArray[i];
                 var optionValue = myStringArray[i];
                 optionsList += optionText + ':' + optionValue;

            }
        }
      if (hidfiletypecodecmb.value != "" && hidfiletypecodecmb.value.length <100)
      {
        hidfiletypecodecmb.value += ';' + optionsList;
      }
      if (hidfiletypecodecmb.value == "")
      {
        hidfiletypecodecmb.value = optionsList;
      }
      optionsList = '';
      for (var i=0; i<lstfiletypecode.options.length; i++)
      {
         var optionText = lstfiletypecode.options[i].text;
         var optionValue = lstfiletypecode.options[i].value;
       
         if ( optionsList.length > 0 )
         {
            optionsList += ';';
         }
         optionsList += optionText + ':' + optionValue;
      }
      if (hidfiletypecodelst.value != "" && hidfiletypecodelst.value.length <100)
      {
         //hidfiletypecodelst.value += ';' + optionsList;
         hidfiletypecodelst.value = optionsList;
      }
      if (hidfiletypecodelst.value == "")
      {
         hidfiletypecodelst.value = optionsList;
      }
 }
 }

Open in new window

AlHal2Asked:
Who is Participating?
 
Terry WoodsConnect With a Mentor IT GuruCommented:
The match function returns an array of matches or null if no match.

Here's an example of testing a value against a regex, with a pattern that might suit your needs:
  var matches='1234,2a4,12f'.match(/^[a-z0-9]{1,4}(,[a-z0-9]{1,4})*$/i);
  if (matches === null) {
    alert('no match');
  } else {
    alert(matches[0]+" matched");
  };

Open in new window

0
 
PawełI Design & Develop SoftwareCommented:
I think your pattern can be ^([a-z|0-9]{0,4},\s?){3}[a-z|0-9]{0,4}$ it'll cover space before the commas

http://codepen.io/chooch/pen/EgNYVK?editors=1010

function test(){
 
  var re = new RegExp("^([a-z|0-9]{0,4},\\s?){3}[a-z|0-9]{0,4}$");
  
  var value = document.getElementById("input").value;
  
  alert(re.test(value));
}

Open in new window


<input id="input" type="text" value="sd4,23e4,23e,2e42"  />
<button onclick="test()">test</button>

Open in new window

0
 
Terry WoodsIT GuruCommented:
Ha, I was a bit slow writing my code...
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Terry WoodsIT GuruCommented:
@Pawel, your pattern is not quite correct actually: [a-z|0-9] allows a pipe character as a valid character (the pipe shouldn't be there - it's only used as an alternation operator when not in square brackets, which is I think what you were intending it to mean)...  allowing the space characters might be important though (I didn't allow for those)

Not sure how many values can be in the list, but Pawel's pattern has a limit of 4, whereas mine is unlimited.

Hope that helps anyway
0
 
AlHal2Author Commented:
I modified it a bit, but thanks very much.

var matches = myStringArray[i].match(/^[A-Za-z0-9]{1,4}(,[A-Za-z0-9]{1,4})*$/i);
            if (matches === null)
            {
                alert(myStringArray[i]+" rejected");
            }
            else
            {
                //alert(matches[0] + " matched");
                //if (myStringArray[i] != "")
                if (myStringArray[i].length == 4)
                {
                    Lbox.options.add(newOption);
                }
                else
                {
                    alert(myStringArray[i] + " must be 4 characters");
                }
            };
0
 
PawełI Design & Develop SoftwareCommented:
good point; i misread, for some reason i got it into my head that alhal2 was looking to match 4 groups of 4 alpha numeric numbers. good catch on the extra pipe, regex is one of those things i use on occasion.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.