Non-validating validation! 2

ralphonzo · Mar 28, 2013

Can anyone see why this form isn't validating? It works fine on other sites, just not this one, which is infuriating!!

Code:

<!--<?php
if(isset($_GET['sect'])) {
	$sect = $_GET['sect'];
	if($sect < 0 || $sect > 7){
		$sect = 0;
	}
} else {
	$sect = 0;
}

// EMAIL INFO 
ob_start();
if(isset($_POST['btnSubmit'])){
	require("js/class.phpmailer.php");
	
	$mail = new PHPMailer();
	
	//Your SMTP servers details
	
	$mail->IsSMTP();               // set mailer to use SMTP
	$mail->Host = "localhost";  // specify main and backup server or localhost
	$mail->SMTPAuth = true;     // turn on SMTP authentication
	$mail->Username = "chris@trainstorm.co.uk";  // SMTP username
	$mail->Password = "D0nt_change"; // SMTP password
	//It should be same as that of the SMTP user
	
	$redirect_url = "[URL unfurl="true"]http://".$_SERVER[/URL]['SERVER_NAME']; //Redirect URL after submit the form
	
	$mail->From = $mail->Username;	//Default From email same as smtp user
	$mail->FromName = $_POST['fullname'];
	
	$mail->AddAddress("chris@trainstorm.co.uk", "Ralph"); //Email address where you wish to receive/collect those emails.
	
	$mail->WordWrap = 50;                                 // set word wrap to 50 characters
	$mail->IsHTML(true);                                  // set email format to HTML
	
	$mail->Subject = $_POST['subject'];
	$message = "Name: ".$_POST['fullname']." \r\n <br>Email: ".$_POST['email']." \r\n <br><br>".$_POST['query'];
	$mail->Body    = $message;

	if(!$mail->Send()){
	   echo "Message could not be sent. <p>";
	   echo "Mailer Error: " . $mail->ErrorInfo;
	   exit;
	}else{
		$error_message = "Your message has been sent. We will be in touch with you shortly.";
	}
}
?> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>email test</title>
<link rel="icon" href="icon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="icon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/global.css" type="text/css" media="screen" />
<!-- EMAIL VALIDATION START -->
<link href="contact/lt.css" rel="stylesheet"/>
<script src="contact/contact.js" charset="utf-8"></script>
<script src="contact/submitroll.js"></script>
<script type="text/javascript">
function validateForm()
{
	var x=document.getElementById("email").value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
	{
		return false;
	}
}
function validate()
{
	if(document.getElementById("fullname").value=='')
	{
		alert("Please provide your name");
		document.getElementById("fullname").focus();
		return false;
	}
	if(document.getElementById("email").value=='')
	{
		alert("Please provide an email address");
		document.getElementById("email").focus();
		return false;
	}
	if(document.getElementById("subject").value=='')
	{
		alert("Please provide a message subject");
		document.getElementById("subject").focus();
		return false;
	}
	if(document.getElementById("query").value=='')
	{
		alert("Please enter your message");
		document.getElementById("query").focus();
		return false;
	}
	if(validateForm() == false){
		alert("Sorry, this is not a valid email address");
		document.getElementById("email").focus();
		return false;
	}	
}
</script>
<!-- EMAIL VALIDATION END -->
</head>

<body style="padding:0px; margin:0px;">

<?
if($error_message != ""){ ?>
	<br style="clear: both";>
	<br style="clear: both";>
	<div id='sender'><? echo $error_message; ?></div><?
}
?>

<div class="footer_left"><span class="footer_titles">GET IN TOUCH</span>
  <form name="form" action="?sect=<? echo $sect; ?>" class="tsc_form_contact_light nolabel" method="post">
    <input type="text" name="fullname" id="fullname" class="form-input" placeholder="Name (required)" required />
    <input type="email" name="email" id="email" class="form-input" placeholder="Email (required)" required />
    <input type="text" name="subject" id="subject" class="form-input" placeholder="Subject (required)" />
    <textarea name="query" id="query" class="form-input"  placeholder="Message (required)" required></textarea>
    <input name="btnSubmit" type="hidden" value="Send Message" >
    <SCRIPT TYPE="text/javascript">
    <!--
    var sr = new submitroll("images/submit.png","images/submithover.png","mysubmit");
    sr.write();
    //-->
    </SCRIPT>
    
    <NOSCRIPT>
        <input class="form-btn" type="submit" value="Send Message" onClick="javascript: return validate();" />
    </NOSCRIPT>
  </form>
</div>
</body>
</html>

It sends the message fine, whether the button image is present or not, but it sends unvalidated messages too regardless!

Here's the submitroll.js code:

Code:

<!--
// copyright 1999-2001 Idocs, Inc. [URL unfurl="true"]http://www.idocs.com/tags/[/URL]
// Distribute this script freely, but keep this 
// notice with the code.
var submitRolls = new Object();

function submitroll(src, oversrc, name)
{
this.src=src;
this.oversrc=oversrc;
this.name=name;
this.alt="Submit Query";
this.write=submitroll_write;
}

function submitroll_write()
{
var thisform = 'document.forms[' + (document.forms.length - 1) + ']';
submitRolls[this.name] = new Object();
submitRolls[this.name].over = new Image();
submitRolls[this.name].over.src = this.oversrc;
submitRolls[this.name].out = new Image();
submitRolls[this.name].out.src = this.src;

document.write
	(
	'<A onMouseOver="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].over.src"' + 
	' onMouseOut="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].out.src"' + 
	' HREF="javascript:'
	);

if (this.sendfield)
	{
	if (! this.sendvalue)
		this.sendvalue = 1;
	document.write(thisform, ".elements['", this.sendfield, "'].value='", this.sendvalue, "';");
	}

document.write(thisform + '.submit();void(0);"');
if (this.msg)document.write(' onClick="return confirm(\'' , this.msg, '\')"');
document.write('>');

document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '" BORDER=0 NAME="' + this.name + '"');
if (this.height)document.write(' HEIGHT=' + this.height);
if (this.width)document.write(' WIDTH='  + this.width);
if (this.otheratts)document.write(' ' + this.otheratts);
document.write('></A>');
if (this.sendfield)
	{
	document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">');
	document.forms[document.forms.length - 1].elements[this.sendfield].value='';
	}
}

//-->

and the contact.js code:

Code:

$(function(){
	$('input[placeholder], textarea[placeholder]').each(function(){
		var $placeInput = $(this);
		
		if( 'placeholder' in document.createElement('input') ) {
			var placeholder = true;
		}
		else {
			var placeholder = false;
			$placeInput.val( $placeInput.attr('placeholder') );
		}
		
		if( !placeholder ) {
			$placeInput.focusin(function(){
				if( $placeInput.val() === $placeInput.attr('placeholder') ) {				
					$placeInput.val('');				
				}
			})
			.focusout(function(){
				if( $placeInput.val() === '' ) {
					$placeInput.val( $placeInput.attr('placeholder') );
				}
			});
		}		
	});
});

vacunita · Mar 28, 2013

Lets start eliminating things.

Since the email portion works fine, and thew issue we have is validation which is performed by the JS, lets get rid of all the PHP, as it jut makes everything harder to read and understand what is going on.

So post the rendered code from the browsers View Source option so that all the PHP has been parsed and we only see the final HTML and JS.

With that, I would first make sure the validation works through the standard submit button. (The one inside the <noscript> tags, but that still requires JS to execute an onClick function...)

If Validation works through that, then we can turn to the submitroll which I'm assuming is what you want to use to validate and submit the form.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

jpadie · Mar 28, 2013

should validateForm() return true if the test is not false? i believe that null evaluates to false so the line

Code:

if(validateForm() == false){

will always evaluate to true (and thus invalidate the form).

i've not read down beyond that point. sorry...

jpadie · Mar 28, 2013

or use a === comparison operator.

ralphonzo · Mar 28, 2013

It works on the NO SCRIPT button, but not the image rollover. Is there a way of implementing it on the latter? This is rreally odd, as it works perfectly well on another site on the same platform!

ralphonzo · Mar 28, 2013

OK, sorted, thanks. Bizarrely, I've gone back to the old MM rollover functionality that I stopped using years ago. Now that HTML5 seems to be happy with it, so am I.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Non-validating validation! 2

ralphonzo

Programmer

vacunita

Programmer

jpadie

Technical User

jpadie

Technical User

ralphonzo

Programmer

ralphonzo

Programmer

Similar threads

Part and Inventory Search

Sponsor