I have to prevent Coldfusion's default list delimiter ',' from being entered into a form input array. I am new to using javascript for validation purposes, and have never tried to switch out the values someone is typing in. How can I snag a ma, and replace it with a tilda?

Javascript i've tried so far:

    $(document).ready(function(event){
      var regExComma = /,/;
      $("[name='name[]']").live("keypress",function(event){
// i know i could check the numerical value, i feel this requirement can get more added to it and I would like to just change the regEx accordingly.
        if(regExComma.test(String.fromCharCode(event.which)){
//it was a ',' switch it to '~'
         event.which = 126;
        }
      });
// added to show that the 'name' input form array is the only input that cares about the ','
    var regExDig = /[\d]/
    $("[name=min[]],[name=max[]]").live(keypress, function(event){
       if(!regExDig .test(String.fromCharCode(event.which)){
        event.preventDefault();
        $("#cfocFormMessages").trigger("updateMessages", {"url":"ponents.cfc/CFOC.cfc", "data":{"more":"stuff"}});
       }
    });
            });

cfml / html involved:

<form action="ponents/CatagoryService.cfc?method=saveVersion">
<input id="version" name="version" type="text">
<!--- .. more inputs ..--->
<table id="table">
  <thead><tr><th>name col</th>
  <th>min col</th>
  <th>max col</th>
  <th>edit</th>
</tr></thead>
  <tfoot></tfoot>
  <cfoutput query="variables.query">
  <tr><td><input name="name[]" type="text" value="#variables.query.name#"></td>
   <td><input name="min[]" type="text" value="#variables.query.min#"></td>
   <td><input name="max[]" type="text" value="#variables.query.max#"></td>
   <td><input name="id[]" type="hidden" value="#variables.query.id#">
     <a href="#" class="editLink">edit</a></td>
  </tr>
  </cfoutput>
  <tr><td></td><td></td><td><a href="#" class="addLink">add</a></td></td></tr>
</table>
<input type="Submit"/>
</form>

if I alter CatagoryService.cfc?method=saveVersion to <cfreturn arguments> in a JSON string, a typical response from Coldfusion looks like:

{VERSION:"",name:"name1,name2",min:"1,3", max:"2,4",id:"1,2"}

I have to prevent Coldfusion's default list delimiter ',' from being entered into a form input array. I am new to using javascript for validation purposes, and have never tried to switch out the values someone is typing in. How can I snag a ma, and replace it with a tilda?

Javascript i've tried so far:

    $(document).ready(function(event){
      var regExComma = /,/;
      $("[name='name[]']").live("keypress",function(event){
// i know i could check the numerical value, i feel this requirement can get more added to it and I would like to just change the regEx accordingly.
        if(regExComma.test(String.fromCharCode(event.which)){
//it was a ',' switch it to '~'
         event.which = 126;
        }
      });
// added to show that the 'name' input form array is the only input that cares about the ','
    var regExDig = /[\d]/
    $("[name=min[]],[name=max[]]").live(keypress, function(event){
       if(!regExDig .test(String.fromCharCode(event.which)){
        event.preventDefault();
        $("#cfocFormMessages").trigger("updateMessages", {"url":"ponents.cfc/CFOC.cfc", "data":{"more":"stuff"}});
       }
    });
            });

cfml / html involved:

<form action="ponents/CatagoryService.cfc?method=saveVersion">
<input id="version" name="version" type="text">
<!--- .. more inputs ..--->
<table id="table">
  <thead><tr><th>name col</th>
  <th>min col</th>
  <th>max col</th>
  <th>edit</th>
</tr></thead>
  <tfoot></tfoot>
  <cfoutput query="variables.query">
  <tr><td><input name="name[]" type="text" value="#variables.query.name#"></td>
   <td><input name="min[]" type="text" value="#variables.query.min#"></td>
   <td><input name="max[]" type="text" value="#variables.query.max#"></td>
   <td><input name="id[]" type="hidden" value="#variables.query.id#">
     <a href="#" class="editLink">edit</a></td>
  </tr>
  </cfoutput>
  <tr><td></td><td></td><td><a href="#" class="addLink">add</a></td></td></tr>
</table>
<input type="Submit"/>
</form>

if I alter CatagoryService.cfc?method=saveVersion to <cfreturn arguments> in a JSON string, a typical response from Coldfusion looks like:

{VERSION:"",name:"name1,name2",min:"1,3", max:"2,4",id:"1,2"}

• javascript
• jquery
• coldfusion-9

Share Improve this question Follow edited Mar 10, 2011 at 22:45 DefyGravity asked Mar 10, 2011 at 22:09 DefyGravityDefyGravity 6,04155 gold badges3434 silver badges4848 bronze badges 2

• 1 What will happen if a user overrides your check and puts in a ma? Will that be a security problem? If so, you'll need to check on the server as well as on the client. – Jeremiah Willcock Commented Mar 10, 2011 at 22:30
• I am checking on the server too. namely the 'name:"name1,name2" coldfusion list will be longer than the 'min' and 'max' lists. I'll add code to show the other validation going on. – DefyGravity Commented Mar 10, 2011 at 22:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I put your HTML on jsfiddle (you can test it there) and added this JavaScript, using a selector that matches all and elements:

$(document).ready(function(event){
    $(document).delegate("input, textarea", "keyup", function(event){
        if(event.which === 188) {
            var cleanedValue = $(this).val().replace(",","~");
            $(this).val(cleanedValue);
        }
    });
});

All mas in the value string are replaced by a tilde if a ma (code 188) was entered.

Remember that JavaScript validation is nothing you want to rely on. The mas can easily be send to the server or never get replaced, e.g. in a user agent with JavaScript disabled.

I replaced the name[] .live() event.which = 126; to event.originalEvent.keyCode=126;

var regExComma = /,/;
$("[name='name[]']").live("keypress",function(event){
     if(regExComma.test(String.fromCharCode(event.which)){
       //this line works as expected. and will swap out the value on keypress.
       if(event.originalEvent.keyCode){
         event.originalEvent.keyCode=126;
       }else if(event.originalEvent.charCode){
         event.originalEvent.charCode=126;
       }
     }
});

wolfram I upped your keyUp solution as well.

Imho, there's no need to check those keyCodes:

 $(document).ready(function(event){
    $('#fieldName').keyup(function(event) {
        var cleanedValue = $(this).val().replace(",","~");
        $(this).val(cleanedValue);
    });
});

Check it on jsFiddle.