JavaScript - Email Form With Simple Validation Output

Hey all,

I'm finishing up a project at work that has a web-based front end. Our tightly compressed schedule has left me with no time to properly learn Javascript, so I need some help. I have two pages that need client side validation...

Page 1:

several text inputs, one select, one textarea, and (maybe) a checkbox

There are some complex things I could do here, but for now, I just need to make users behave. The textarea must have something in it, certain select options need a Yes/No popup, and if the checkbox is written to the page (ASP determines this) then it must be checked before certain select options are submitted.

I could copy some examples I've found, but how do I ignore the checkbox when it doesn't exist?

Page 2:

two selects and a textarea

Options must be selected and the textarea must have something in it. Straightforward, except that it's a dynamic form where each element has a name + i where i is a number that increments each time the user expands the form. Will wildcards work here?


I know this looks like "do my homework" but any help would be greatly appreciated.

This is desired to work in IE6, but if that can't happen, I can force an IE8 upgrade on everyone.

I am trying to have the page go to another page after clicking the submit button.

is it possible to add to this function an else statement ?
if form is filled then go to this page

Code:

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus();
		return false;
	}
	return true;
}

I'm trying to do a simple validation to see if the field is blank, if it is, I want to write a message to a div. I've added the function call to an onclick. It seems to be set off no matter if there is a value or not, and what's more, the fields are clearing out when the link is clicked. My brain is mush right now, so what am I missing?

Code:

function validateThis() {
	document.getElementById('messages').innerHTML = ''
	var theMessage = '';
	var reqMsg = 'must have a value.';
	
	for (var i = 0; i <document.theForm1.elements.length; i++) {
	if (document.theForm1.elements[i].value = ' ') {
		theMessage += document.theForm1.elements[i].name +' ' + reqMsg +'<br/>';
	}}
	
	document.getElementById('messages').innerHTML = theMessage;
}

Hi
I am trying to valid a simple address, that works fine apart from the fact that it will not allow forward slash in it "/" such as: Unit 12/13 some where.

In brief I want to change /^[\w ]+$/; to include a forward character in it.

I am new to javascript.

many thx.

p.s. every time I google it they find me email address validation dehhhhh



I use the following code:
Quote:

function validateVat_No(fld) {
var error = "";
var illegalChars = /^[\w ]+$/; // allow letters, numbers, and spaces

if (fld.value !== "") {

if (!illegalChars.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The Vat No contains illegal characters.\n";
}
}

else {
fld.style.background = 'White';

}
return error;
}

Would appreciate some help making some minor enhancements to a pet adoption form: http://pawsct.org/application.php

Problem - Applicants don't read. They answer "No" to the "Agree to Shelter Visit" question, then fill out the looooong application, and get abusive when told that they're not eligible for adoption. They apply from Florida and ignore the warnings about the 90 mile limit. Text notes just don't make enough of an impact.

I want to use OnChange to give an alert if someone does not answer "Yes" to agree to a shelter visit (i.e. popup "You must agree to a shelter visit to qualify for an adoption from PAWS") and perhaps a warning message (red text reminder about the 90 mile limit next to the drop-down box) if someone enters a state other than CT.

Second problem - I'm a volunteer who doesn't know javascript and can't cobble together a SIMPLE, workable solution from other code samples. Any assistance that you can provide would be most welcome and appreciated.

Note: we are planning a redesign of the web site and may do some more sophisticated form validation (e.g. check age, valid e-mail, valid phone) in the future. But for now, we're just looking to check a few key fields for answers that would immediately disqualify an applicant.

I'm trying to make an xhtml form that validates itself through a javascript function. I have the form up but for some reason I can't get it to validate. I'm not even sure if I linked things correctly. Here's what I have:

the xhtml file

<?xml version = ″1.0″ encoding = ″utf-8″ ?>
<!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Strict//EN″
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>


<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<script src="gas24.js" type="text/javascript"></script>

<h2> Registration Form </h2>

<title>
Javascript Form Validation Homework

</title>

</head>

<body>

<table border="">
<form name="validation_form" method="post" onsubmit="return validate()">

<tr>
<td>
<t>Name: <input type="text" name="YourName" size="10" maxlength="10"/>
</td> </tr> </br>
<tr>
<td>
E-mail Address: <input type="text" name="YourEmail" size="10" maxlength="24"/>
</td> </tr> </br>
<tr>
<td>
Password: <input type="password" name="YourPassword" size="10" maxlength="10"/>
</td> </tr> </br>
<tr>
<td>
Re-Type Password:
<input type="password" name="passwordConfirmed" size="10" maxlength="10"/>
</td> </tr> </br>
<tr>
<td>
Your Gender: <input type="radio" name="MaleBox" Value="Male"> Male
<input type="radio" name="FemaleBox" Value="Female"> Female
</td> </tr> </br>
<tr>
<td>
Comments:
<input type="text" name="Comments" size="100" maxlength="500" value=""/>
</td> </tr>
<tr>
<td>
<input type="submit" value="Submit"/>
</td> </tr>
</form>



</table>

<p></p>



</body>
</html>

The javascript file:
I've tried two things. This:
<SCRIPT LANGUAGE="JavaScript">

function validation()
{


var x=document.forms["validation_form"]["YourName"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}


}

And this:

function validation()

if ( document.validation_form.YourName.value == "" )
{

alert( "Please type your name.");
valid = false;
}



if ( document.validation_form.YourPassword.value =!
"document.validation_form.Confirm.value" )
{
alert ( "Please confirm your password." );
valid = false;
}


I would greatly appreciate it if somebody could tell me what I'm doing wrong.

Hello,
On my client's site: www.twdcycling.com he wanted a place where people could make suggestions for his blog.
I accomplished the simple form using a textarea field and even put a little text that clears on clicks and reappears on blur.
When you go there--go to the bottom left.

It also actually works.
The problem is that (besides the fact that so far no one has cared to make a suggestion) somehow the form is (this is what I believe) being submitted automatically. I don't believe a human is clicking submit. When I click submit w/o clicking in the field the default text that I have in the field already gets submitted in the generated email.

So I now need to work on my validation in my php file that sends the email.
For background I obtained my php file from html-form-guide.com
here the file is in its entirety:
Code:

<?php
if(!isset($_POST['submit']))
{
	//This page should not be accessed directly. Need to submit the form.
	echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];

//Validate first
if(empty($name)||empty($visitor_email)) 
{
    echo "Name and email are mandatory!";
    exit;
}

if(IsInjected($visitor_email))
{
    echo "Bad email value!";
    exit;
}

$email_from = 'tom@amazing-designs.com';//<== update the email address
$email_subject = "New Form submission";
$email_body = "You have received a new message from the user $name.\n".
    "Here is the message:\n $message".
    
$to = "tom@amazing-designs.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');


// Function to validate against any email injection attempts
function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
   
?>

It does have some validation code, and it also is set up to handle more parameters than I needed. I tried to just pare it down to the one simple thing (I just need the user to type anything they want into my text area)

My reasoning is that I should be able to go get some simple validation snippet to make it so that if there is the possibility something is causing the form to just "fire off" w/o a human clicking, the validation shouldn't allow it to send, cause the text field is empty. But one would think if that is happening my default text would allow it to send, but oddly enough, no! when I get the email (last one at 5:49 am) it was a blank email! So its like some robot is doing two things: clicking in the field to empty it and THEN clicking submit! Weird, I know. But the validation code would fix this if only I knew how. (But on another note, if I try to send an empty box my default text pops back in when I click submit--proving that its happening automatically.

I tried all morning yesterday to implement a snippet from several sources.

Here's a couple of examples of what I added:

Code:

function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}

I didn't modify this code at all....maybe where I went wrong here. Should "value" correspond to text area name "message"? (about the only thing I didn't try)
Here's another one --this one from W3 schools:
Code:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

this is how it was on the source site, all I changed was "myForm" and "fname" to "blog_suggestion"

But when testing both these snippets separately what happened is that on submit I just go to my php page (which is just blank) I'm assuming code I'm adding is crashing the script somehow. And then of course no thank you page and no email sent.

Finally here is my current php page in its entirety, followed by the form code on the home page...
Code:

<?php
if(!isset($_POST['submit']))
{
	//This page should not be accessed directly. Need to submit the form.
	echo "error; you need to submit the form!";
}

$message = $_POST['message'];

//Validate first
if(empty($message)) 
{
    echo "Please enter a suggestion before clicking submit.";
    exit;
}


$email_from = 'f7digitaldesign@gmail.com';//<== update the email address
$email_subject = "SOMEONE HAS SUBMITTED A SUGGESTION FOR THE BLOG!";
$email_body = "\n $message".

$to = "f7digitaldesign@gmail.com";//<== update the email address
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .

//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');


// Function to validate against any email injection attempts
function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
   
?>

I tried to modify the validation I got w/ this to produce the "echo" message "Please enter a suggestion before clicking submit." But let's be honest, by now you know I don't know what in the heck I'm doing (it doesn't seem to matter).

Form code:
Code:

<form name="blog_suggetion" method="post" action="send_form_blogidea.php">
                     <span class="bloginfotext" ><textarea name="message" rows="14" cols="12" onfocus="clearValue(this, 'Please submit ideas for our blog here&mdash;we&rsquo;d love to hear from you!')" onclick="this.value='';" onblur="if (this.value == '') {this.value = 'Please submit ideas for our blog here&mdash;we&rsquo;d love to hear from you!';}" ></textarea></span>
        <div style="font-size:6px; color:#FFF;">sdsadfds</div>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name='submit' value="submit">
             </form>

Any time spent and help offered for this is greatly appreciated!! Also if you need to/want to test the field, I don't care--send me a message. I'll know someone cares!
Brian

I have built a signup form which has several text inputs and text areas. Their labels are set as their values. When the user focuses on the field, the label text is cleared to accept text input. When focus is changed to another field. The field checks if text has been entered. If it has not, it then resets the value back to the default label value.

For example:

Code:

<input type="text" name="company_name" size="50" class="textInput" value="Company Name" onfocus="if(this.value=='Company Name')this.value='';" onblur="if(this.value=='')this.value='Company Name';" />

What I would like to do is have some simple javascript which checks the fields on submit. If any of the required fields still have the default label value, then I would like to change the colour of the label value in the input to red and disable the form submit until the value is corrected. Most of the inputs and text areas will accept any text, though one is an email text input. I don't think any fancy validation is needed for this email input , other than checking to be sure a '@' has been entered.

Since the website that this form will be contained in runs jQuery, I have looked into some plugins for form validation. However, these seem to be over-complicated for what I need. I want to keep this as simple and light as possible. Oh, and also, I am not allowed to use anything php based as this is not allowed to run on our servers for security reasons...

Any advice or suggestions are much appreciated!

First of all Thank you for looking at my issues. Just so you know, I am not a coder

I have a new set of problems I'm hoping someone can help me with.
Please read all three problems listed below as they are all intertwined. Thank you for any assistance you have with these issues.

First, here is the url to my test form
http://www.rocpinions.com/test-main-form.html

Next, Here is the code I am using.

The code is set up on dog cat other and none.
The test check 1 etc are all individual check box groups

Code:

<script type="text/javascript">
function checkI()
{
var other=0;
 var checkL = document.getElementsByName('form[PetsInHouse][]');
   for (var i=0;i<checkL.length-1;i++){
     if(document.getElementById('PetsInHouse3').checked){
      document.getElementById('PetsInHouse'+i).disabled = true;
      document.getElementById('PetsInHouse'+i).checked = false;
		}
     else {
      document.getElementById('PetsInHouse'+i).disabled = false;
		}
		if(document.getElementById('PetsInHouse'+i).checked){
		other++
		}
	 }
	 document.getElementById('PetsInHouse3').disabled=other>0?true:false;
	}
</script>

And here is the call I am using

onclick="checkI();"

Problem 1
This code works fine as is is set up and does what it should. The problem is i am also using this on longer sets of check boxes and I would like to instead of disabling I would like to have it set up so if someone clicks dog cat and other then if they choose the check box "None" it would empty all other check boxes and check the check box "None" and visa versa if none was checked and they checked dog, it would empty the None check.

Problem 2
I am using Joomla cms and a form constructor called RS Form Pro. It stores the data submitted in the form to a data base. As it is now, all the info in the check box group is submitted to ONE column. I need to submit it to individual columns for each choice. I can accomplish this by using individual check box groups for EACH item. This will put it in separate columns in the data base but I still need to have it set up so if someone clicks dog cat and other then if they choose the check box "None" it would empty all other check boxes and check the check box "None" and visa versa if none was checked and they checked dog, it would empty the None check.

Problem 3
How it submits data to the data base
Right now, it submits the data from the check boxes by the name of the check box. What I would like to have is a 1 if it IS checked and a 0 if IS NOT checked.

Again, Thank you for any assistance

DeZiner

I've got a form validation script and I'm trying to add in a little extra oomph to what it checks. I'm not sure on the syntax for this, but I'm currently trying to make sure the email has the proper data using something like:

else if (email.indexOf("@")<1 || email.indexOf(".")==-1 || email.indexOf(",")!=-1 || email.indexOf(" ")!=-1 || email.length<6)

But when I add that if statement, the script does nothing, and they're taken to the next page.

While I'm at it, is it possible to make sure that at least one of a series of looped-in dropdowns that have a php generated name:

<select name="participantqty[<?= $c_row['workshop_id'] ?>]" id="" class="">

Here's the script I'm working from, with my if statement in it and breaking things:
Code:

<script type="text/javascript">
 function required(){
    var first = document.forms["register1"].elements["fname"].value;
    var last = document.forms["register1"].elements["lname"].value;
    var email = document.forms["register1"].elements["email"].value;
    var message = document.forms["register1"].elements["phone"].value;
 
    if(first == null || first == "" || last == null || last == ""){
        alert("First and last name fields are required.");
        return false;
    }
    else if(email == null || email == ""){
        alert('An email address is required.');
        return false;
    } 
	else if (email.indexOf("@")<1 || email.indexOf(".")==-1 || email.indexOf(",")!=-1 || email.indexOf(" ")!=-1 || email.length<6)
	{
    alert('Please enter a valid E-mail address.\n" +
    "Example: myname@domainname.com");
    register1.email.focus();
    return false;
  }	
    else if(message == null || message == ""){
        alert('A phone number is required.');
        return false;
    }else{return true;}
}
 </script>

This piece of Dreamweaver(?) code appears to validate an email address:

Code:

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
       if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n'; 
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}

The checking routine works well except I can't figure out how to invoke the email check part (red above?).

This is the onsubmit bit:

Code:

<form id="quoteform" name="contactfrm" onsubmit="MM_validateForm('First_Name','','R','Last_Name','','R','City','','R','State','','R','Zip','','R','Day_Phone','','R','Evening_Phone','','','Email','','R');return document.MM_returnValue;" action="contact.php" method="post">

I have tried altering the field id and name below to "isEmail' but it does nothing:

Code:

<td height="32" bgcolor="#F8F8F8"><strong>Email Address:</td>
<td><input name="YOUR EMAIL" type="text" id="Email" size="30"></td>

Is it obvious?

Hi Everyone!

I have a text box ... but the label is in the textbox as the value so I use this code to make sure that something is filled in the field when a user clicks send:

if(form.email.value == ('' || 'email*')){
alert('Please enter your email address');
return false;
}

<label><input type="text" name="email" id="email" class="required" value="email*" onfocus="if( this.value == 'email*') {this.value = '';}" onblur="if (this.value == '') { this.value = 'email*';}" /></label>



I have tried to add email validation to the javascript code but I am failing! can someone help please? at the moment it just checks to see if the field has been filled out but doesn't check for the @ and .co.uk or .com.

Many thanks!

Let's start by saying that I stink at javascript. I've taken multiple different tutorials, some more than once, and I still can't get it. So, when I need a code, I search for it, and try different ones until I find something that works.

I've been looking for a code for email validation for quite a long time, and I still can't find something that works with my code for validating the other parts of my contact form. I can get it to check for the presence of text, but not for the presence of an @ sign and period. I would like for someone to please help me figure this out.

Right now I have the following code:

Javascript

Code:

<!--

function validate_form ( )
{
    valid = true;

    if ( document.contact.firstnamecontact.value == "" )
    {
        alert ( "Please fill in the 'First Name' box." );
        valid = false;
    }

    if ( document.contact.lastnamecontact.value == "" )
    {
        alert ( "Please fill in the 'Last Name' box." );
        valid = false;
    }

    if ( document.contact.emailcontact.value == "" )
    {
        alert ( "Please fill in a valid email address." );
        valid = false;
    }

    if ( document.contact.subjectcontact.value == "" )
    {
	alert ("Please fill in the 'Subject' box." );
	valid = false;
    }

    if ( ( document.contact.topic[0].checked == false )
    && ( document.contact.topic[1].checked == false )
    && ( document.contact.topic[2].checked == false ) )
    {
        alert ( "Please choose your Topic of Inquiry" );
        valid = false;
    }

    if ( document.contact.messagecontact.value == "" )
    {
        alert ( "Please specify a question/comment." );
        valid = false;
    }

    return valid;
}

//-->

HTML

Code:

<form name="contact" method="post" action="contactcompletion.php3" onsubmit="return validate_form ( );">

<table>

<tr>
<td><b>First Name:&nbsp;</td><td><input type="text" name="firstnamecontact"/></td>
</tr>

<tr>
<td><b>Last Name:&nbsp;</b></td><td><input type="text" name="lastnamecontact"/></td>
</tr>

<tr>
<td><b>Email:&nbsp;</b></td><td><input type="text" name="emailcontact"/></td>
</tr>

<tr>
<td><b>Subject:&nbsp;</b></td><td><input type="text" name="subjectcontact"/></td>
</tr>

</table>

<br />
<br />


<h4>Topic of Inquiry (Choose One):</h4>

<table>


<tr>
<td><input type="radio" name="topic" value="questionscontact" /><b>&nbsp;&nbsp;Questions</b></td>

<td><input type="radio" name="topic" value="commentscontact" /><b>&nbsp;&nbsp;Comments</b></td>

<td><input type="radio" name="topic" value="othercontact" /><b>&nbsp;&nbsp;Other</b></td>
</tr>

</table>

<br />
<br />

<h4>Enter Your Questions or Comments:</h4>

<br />

<textarea name="messagecontact" rows="10" cols="70"></textarea>

<br />
<br />

<p><input type="submit" name="send" value="Send" /></p>

Thanks a bunch in advance for helping me!!

I can't seem to get any Email validation to work, at all. no matter what different tactic I try.

Right now I'm trying the most simplest of tactics..

Code:

if((document.subscribe.contacttype.selectedIndex==1) && (document.subscribe.email.value=="")){
		alert("Please enter a Valid Email Address.");
		return false;
		}
		else{
			if((document.subscribe.email.indexOf('@') < 0) || ((document.subscribe.email.charAt(email.length-4) != '.') && (document.subscribe.email.charAt(email.length-3) != '.')))
			{alert("you have entered an invalid Email Address. Please try again.");
			}
		}
}

Any suggestions? my 'Email' feed is displayed after the 'drop-down selector' has been chosen, thus, the invoking of the if selectedIndex==1 && email.value="" return false;.

Thanks for your assistance ahead of time.