PDA

View Full Version : Need help: Validate Multiline User Input



ddanatzko
Jun 1st, 2007, 04:01 PM
New to the Forum and Javascript so patience would be appreciated.

My Problem:

I'm trying to validate user input in a textarea. The pattern I'm trying to match is an IP address followed by a comma followed by a hostname (eg. 1.1.1.1,hostname, or 1.1.1.1,host-name, or 1.1.1.1,host_name) with no spaces.

The hostname can be comprised of any valid characters recognized by DNS (alphanumeric characters, underscores and dashes).

The text area allows for an entry on each line. I am able to validate a single line entry with the following regex:

var RegEx4 = /^(\d{1,3}\.){3}\d{1,3}\,(\w|-)+/;

This does not cover multiline entries. So, if a user input the first line correctly, the subsequent lines would not be validated. This has lead me to use multiple regex tests for the textarea input.

My code is as follows:


// Ensure the Text Area has no white space and has an IP address
// followed by a comma followed by any number of alphanumerical chars
var txtBox = document.getElementById("nodesinput");
var RegEx1 = / /;
var RegEx2 = /^(\d{1,3}\.){3}\d{1,3}\,(\w|-)+$/m;
var RegEx3 = /\s+/;
var RegEx4 = /^(\d{1,3}\.){3}\d{1,3}\,(\w|-)+$/;
var RegEx5 = /\S/;

if (txtBox.value.length <=0){
notify("Device Data can not be blank");
return false;
}

if ( RegEx1.test(txtBox.value) == true) {
notify("Device Data Cannot Contain ANY whitespaces");
return false;
}

if (RegEx5.test(txtBox.value) == true) {
if ( RegEx4.test(txtBox.value) != true){
notify("Invalid Format. Please use IP Address,Hostname - e.g. 1.1.1.1,hostname");
return false;
}
}

if ( RegEx3.test(txtBox.value) == true){
if ( RegEx2.test(txtBox.value) != true){
notify("Invalid Format. Please use IP Address,Hostname - e.g. 1.1.1.1,hostname");
return false;
}
}

var Record = document.getElementById("record");

if (Record.value.length <= 0) {
notify("Please Enter Associated Record or Reason for Addition or Deletion");
return false;
}

return true;
}

Now, it does not accept anything with mulitple lines. Please help

glenngv
Jun 1st, 2007, 05:35 PM
Just split the textarea content with newlines and loop through each line and validate.

var txtBox = document.getElementById("nodesinput");
var arr = txtBox.value.split(/\n|\r\n/);
for (var i=0; i<arr.length; i++){
alert(arr[i]);
//validate each line
}

Browsers treat new lines differently. Some only use \n, while some use \r\n.

ddanatzko
Jun 1st, 2007, 06:06 PM
Thanks for the suggestion Glenn. It's still not working though. I know what you mean by different browesers treating newlines differently. I ran into a problem with this same textarea when I was trying to explode on the newlines between the IP,Hostname in php. I think the problem might have something to do with (/\n|\r\n/). My entire user base all use IE6 (company standard) any suggestions...possible bugs?

glenngv
Jun 1st, 2007, 06:19 PM
This works for me:


function validate(){
var txtBox = document.getElementById("nodesinput");
var arr = txtBox.value.split(/\n|\r\n/);
var RegEx = /^(\d{1,3}\.){3}\d{1,3}\,(\w|-)+$/;
for (var i=0; i<arr.length; i++){
alert("'"+arr[i]+"'");
if (!RegEx.test(arr[i])){
alert("Invalid Format. Please use IP Address,Hostname - e.g. 1.1.1.1,hostname");
return false;
}
}
return true;
}

ddanatzko
Jun 1st, 2007, 06:42 PM
OK, not sure what I was missing before, but this works now and it's consolidated 2 checks into 1. The only problem left is that it allows for an extra \r\n to be submitted and the perl script handling the form processing pukes with that extra return in there. I'm pretty sure that I can handle that (either I'll replace it with nothing in the string or throw another check in the Jscript to keep it from hitting the per script).

THANK YOU SO MUCH GLENN, I owe you a beer. I see you're in McLean. I work right off Old Meadow Ln on 123. What company do you work for?

glenngv
Jun 1st, 2007, 06:58 PM
You can trim the value to remove leading and trailing whitespaces.

String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g,"");
}
...
var arr = txtBox.value.trim().split(/\n|\r\n/);

ddanatzko
Jun 1st, 2007, 07:14 PM
I just tested for the existence of /\s+$/ and that worked perfectly. If I'm missing something here, please let me know

glenngv
Jun 1st, 2007, 07:20 PM
What if the user enters newlines at the start of the textarea?

ddanatzko
Jun 1st, 2007, 07:23 PM
good point, so how about:

/(^\s+|\s+$)/

glenngv
Jun 1st, 2007, 07:30 PM
Include the "g" to replace all occurrences of leading and trailing whitespaces.

String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g,"");
}