Forums

slacey

I'm using the Nice & Simple Contact form and it works perfectly but I need some help with something else.

How do I make an entry field required to be filled out before submission? You know, where the user gets an error message saying, "Please fill out your name & email."

The PHP is exactly what Chris gave us other than edits to the To and From emails. If anyone could help, I'd greatly appreciate it!! I'm only familiar with editing PHP and not creating it.

Robskiwarrior

I would do - personally and if statement.

  if($requiredfield) {
       
     //it is true - form submitted
        
     } else {

    //it is false form re-displayed with a message at the top like \"fill it in properly\" :) 

    }

If you know PHP a little, that will make sense, if not then you might need to give us some code lol

slacey

Thanks Rob!

Well, I guess I don't know as much as I thought I did because I'm a little confused.

Here's my PHP

<?php

$EmailFrom = \"TESTING\";
$EmailTo = \"sarah@ontheedgedesign.com\";
$Subject = \"Mine Shaft Contact Form\";
$Name = Trim(stripslashes($_POST['Name'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

	
// validation
$validationOK=true;
if (!$validationOK) {
  print \"<meta http-equiv=\\"refresh\\" content=\\"0;URL=error.htm\\">\";
  exit;
}

// prepare email body text
$Body = \"\";
$Body .= \"Name: \";
$Body .= $Name;
$Body .= \"\n\";
$Body .= \"Email: \";
$Body .= $Email;
$Body .= \"\n\";
$Body .= \"Message: \";
$Body .= $Message;
$Body .= \"\n\";

// send email 
$success = mail($EmailTo, $Subject, $Body, \"From: <$EmailFrom>\");

// redirect to success page 
if ($success){
  print \"<meta http-equiv=\\"refresh\\" content=\\"0;URL=contactthanks.php\\">\";
}
else{
  print \"<meta http-equiv=\\"refresh\\" content=\\"0;URL=error.htm\\">\";
}

?>

And here is the form in my HTML

 <div id=\"contact-area\">
             <p>We would love to hear your thoughts or comments.<br />Please feel free to send a message below.</p>
			
			<form method=\"post\" action=\"contactengine.php\">
				<label for=\"Name\">Name:</label>
				<br /><input type=\"text\" name=\"Name\" id=\"Name\" />
	
				<br /><label for=\"Email\">Email:</label>
				<br /><input type=\"text\" name=\"Email\" id=\"Email\" />
				
				<br /><label for=\"Message\">Message:</label>
				<br /><textarea name=\"Message\" rows=\"20\" cols=\"20\" id=\"Message\"></textarea>

				<br /><input type=\"submit\" name=\"submit\" value=\"Submit\" class=\"submit-button\" />
			</form>
								
			</div> <!-- End Contact Area -->

ikthius

I have a javascript file at the top of my contact page that colour codes the bits that need filled in before posting.

if you would like to see this let me know:

some prefer some other ways to do it, I did not want anything intrusive for the person filling in the form......

slacey

Yeah I'd love to see it. I don't really care how it's done as long as it works.

ikthius

"slacey" said:
Yeah I'd love to see it. I don't really care how it's done as long as it works.

ok this is the javascript in the head tag:


<script type=\"text/javascript\">
	<!-- Hide Script
	function onloadfocus()
	{
		document.myform.name.focus();
	}

	function resetWhite(theForm)
	{
		theForm.name.style.background = 'white';
		theForm.email.style.background = 'white';
		theForm.tel.style.background = 'white';
		theForm.message.style.background = 'white';
		theForm.captchaHTML.style.background = 'white';
		theForm.name.focus();
	}

function validateFormOnSubmit(theForm) {
var reason = \"\";


  reason += validateName(theForm.name);
  reason += validateEmail(theForm.email);
  //reason += validatePhone(theForm.tel);
  reason += validateEmpty(theForm.message);
  reason += validateCaptchaHTML(theForm.captchaHTML);
      
  if (reason != \"\") {
    //alert(\"Some fields need correction:\n\n\n\" + reason);
    return false;
  }

  //alert(\"All fields are filled correctly\");
  return true;
}
function validateEmpty(fld) {
    var error = \"\";
 
    if (fld.value.length == 0) {
        fld.style.background = '#f1f453'; 
        error = \"The required message field has not been filled in.\n\n\n\"
    } else {
        fld.style.background = 'White';
    }
    return error;  
}
function validateName(fld) {
    var error = \"\";
    var illegalChars = /\W\ /; // allow letters, numbers, and underscores
 
    if (fld.value == \"\") {
        fld.style.background = '#f1f453'; 
        error = \"Please enter your full name.\n\n\";
    } else if (fld.value.length < 3) {
        fld.style.background = '#f1f453'; 
        error = \"Your name should be in full and over 5 characters in length.\n\n\";
    } else if (illegalChars.test(fld.value)) {
        fld.style.background = '#f1f453'; 
        error = \"The name contains illegal characters.\n\n\";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
 
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
}
function validateEmail(fld) {
    var error=\"\";
    var tfld = trim(fld.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\\"\[\]]/ ;
   
    if (fld.value == \"\") {
        fld.style.background = '#f1f453';
        error = \"Please enter a valid email address.\n\n\";
    } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
        fld.style.background = '#f1f453';
        error = \"Please enter a valid email address.\n\n\";
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = '#f1f453';
        error = \"The email address contains illegal characters.\n\n\";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
function validatePhone(fld) {
    var error = \"\";
    var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');    

   if (fld.value == \"\") {
        error = \"Please enter your phone number including area code and omit spaces.\n\n\";
        fld.style.background = '#f1f453';
    } else if (isNaN(parseInt(stripped))) {
        error = \"The phone number contains illegal characters.\n\n\";
        fld.style.background = '#f1f453';
    } else if (!(stripped.length == 11)) {
        error = \"Make sure you included an area code and omit spaces. \nThe phone number should be 11 numbers in length.\n\n\";
        fld.style.background = '#f1f453';
    }
		else {
        fld.style.background = 'White';
    }
    return error;
}
function validateCaptchaHTML(fld) {
    var error = \"\";
    var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');    

   if (fld.value == \"\") {
        error = \"Please enter the result of the sum.\n\n\";
        fld.style.background = '#f1f453';
    } else if (isNaN(parseInt(stripped))) {
        error = \"The number is wrong.\n\n\";
        fld.style.background = '#f1f453';
    } else if (!(stripped.length == 2)) {
        error = \"The number is wrong.\n\n\";
        fld.style.background = '#f1f453';
    }
		else {
        fld.style.background = 'White';
    }
    return error;
}
//End Hide Script-->
</script>

here is my form:


<form method=\"post\" action=\"abc/contact.php\" id=\"myform\" name=\"myform\" onsubmit=\"return validateFormOnSubmit(this)\"  onreset=\"resetWhite(this)\"> 
							<fieldset id=\"theForm\">
							<legend>Contact Form</legend>
							<label for=\"name\">Name: </label>
								<input name=\"name\" size=\"50\" class=\"contactFormBorder\" type=\"text\" tabindex=\"1\"><br>
							<label for=\"tel\">Tel: </label>
								<input name=\"tel\"  size=\"50\" class=\"contactFormBorder\" type=\"text\" tabindex=\"2\"><br>
							<label for=\"email\">Email: </label>
								<input name=\"email\"  size=\"50\" class=\"contactFormBorder\" type=\"text\" tabindex=\"3\"><br>
							<label for=\"message\">Message: </label>
								<textarea name=\"message\" cols=\"70\" rows=\"4\" class=\"contactFormBorder\" tabindex=\"4\"></textarea><br>
							<div id=\"validationtext\">Validation, to help prevent spam:</div>
							<label for=\"captchaHTML\">10&#43;6 &#61; </label>
								<input name=\"captchaHTML\" class=\"contactFormBorder\" type=\"text\" tabindex=\"5\" size=\"2\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type=\"submit\" name=\"submit\" value=\"   Submit   \" class=\"subRes\" tabindex=\"6\">&nbsp;&nbsp;&nbsp;<input type=\"reset\" name=\"reset\" value=\"   Reset   \" tabindex=\"7\">
								<input type=\"hidden\" name=\"hidden\" id=\"hidden\">
						</fieldset>
						</form>

now it will work as is, but your form may not look like this, however you can change it, it is quite easy to understand.....

treehouse : what would you like to learn today?

Forums

Contact Form Required Field?