At least one non-empty field - whitespace issue

DogTags · 03-10-2005, 08:25 AM

Hi All

I have a script that I'm workin on. It validates a group of text fields and gives an alert if none of the fields contains data.

The test is that there must be at least one field with real content. Otherwise, you get the alert. The bugger is that the script thinks that whitespace by itself is allowable content, and that's the rub.

Thus, if you have a situation where all 6 fields contain nothing or only whitespace, then you get the alert. BUT, if any field contains any real content (other than just whitespace), then the form is allowed to pass.

Example: Pass
name: (nuthin)
email: (nuthin)
addr1: (whitespace)
addr2: (whitespace)
phone: "blah"
zip: (whitespace)

Example: Fail
name: (nuthin)
email: (nuthin)
addr1: (whitespace)
addr2: (whitespace)
phone: (whitespace)
zip: (whitespace)

I hope I have explained this well enough

Here's the form. What do you think?

Code:

<HTML>
<HEAD>
<TITLE>At Least One non-empty field</TITLE>
<script language="JavaScript">
<!--
function atleastonenonemptyfield() {
 if (contactform.name.value == "" && contactform.email.value == "" && contactform.addr1.value == "" && contactform.addr2.value == "" && contactform.phone.value == "" && contactform.zip.value == "") { 
    alert( "Please fill in at least one box" ); 
    return false; 
  }
  }
//-->
</script>


</HEAD>
<BODY>
<FORM NAME="contactform" ACTION="http://site/blah/" METHOD="post" onsubmit="atleastonenonemptyfield();">
<BR>
name<input type="text" name="name"><br>
email<input type="text" name="email"><br>
addr1<input type="text" name="addr1"><br>
addr2<input type="text" name="addr2"><br>
phone<input type="text" name="phone"><br>
zip<input type="text" name="zip"><br>
<INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>

sde · 03-10-2005, 09:06 AM

here is a trim function .. you could trim whitespace off the input and then validate.

Code:

 function trim(str){
   return str.replace(/^\s*|\s*$/g,"");
}
function atleastonenonemptyfield() {
 if (trim(contactform.name.value) == "" && trim(contactform.email.value) == "" && trim(contactform.addr1.value) == "" && trim(contactform.addr2.value) == "" && trim(contactform.phone.value) == "" && trim(contactform.zip.value) == "") { 
    alert( "Please fill in at least one box" ); 
    return false; 
  }
}

i haven't actually tested that, but it seems like it should work.

DogTags · 03-10-2005, 09:29 AM

Thanks sde

I plugged it in, and it seems to be working

If a field has one whitespace and then some real content, it doesn't strip the whitespace (as far as I can see - I'm gonna test some more later) - that's good in this case.

I ran into a prob.

If no field has any content, the script does give you the alert, but as soon as you click the alert, the form still tries to submit to ACTION="http://site/blah/"

In other words, the form is trying to submit the data whether or not it passes the validation test.

Would there be a way where if the alert is triggered, you click the OK and the page just sits there while the visitor enters real data, and then the visitor clicks submit again and assuming valid data has been entered, then the script submits the data?

Many thanks

sde · 03-10-2005, 10:53 AM

in your form tag, the onsubmit needs to evaluate to false for the form not to submit. i see you have the function returning false already, so u just need to add 'return' before the function call. example:

Code:

onsubmit="return atleastonenonemptyfield();"

DogTags · 03-10-2005, 01:29 PM

Ah, great. It works

Thanks so much, Stan. This is a big help