asked on

Spry form validation on AJAX generated sub-pages

Hello,

I know this is likely to be an easy question, but it has really stumped me. I'm using Dreamweaver's built in spry validation for forms. It works perfectly, but breaks on sub-pages being accessed through AJAX. I've spent many hours searching for answers and manipulating the files with no solution. I'm assuming it's because the sub-page is not initially loaded. Does anyone have any idea how to get it to work?

Attached are necessary files in extremely simplified format that provide the exact scenerio.

Thanks grealy!
111002.php
test.php
SpryValidationTextField.css
SpryValidationTextField.js

Member_2_248744

greetings kremzeeks, I looked at your files above, the 111002.php , test.php and SpryValidationTextField.js ,, I do not see that you understand what AJAX does, and why and how to use an AJAX javascript on your web page 111002.php .
First, you do not need and should not have the any of the -
<html xmlns="http://www.w3.org/1999/xhtml">

usual web page set up html tags like <!DOCTYPE>, <HTML>, <HEAD>, <TITLE>, <BODY>
these tags are already in your 111002.php page when it gets to your browser, Using AJAX means that you are NOT reloading your web page, you are just changing one section of your web page, in your case the contents or innerHTML of -
<div id="myDiv">
so adding the extra <!DOCTYPE>, <HTML>, <HEAD>, <TITLE>, <BODY> tags to a DIV, makes the browser do unnecessary work in reading the tags and then usually NOT using those tags, because they are already set.

Next, I have found that it is more reliable to place any javascript files or functions that are used in the changed <DIV> by the AJAX code, to be placed in the web page that is calling the div to be changed, and not have any javascript in the ajax HTML placed into a <DIV>

below is some code that you might consider for your test.php file

<p>Form validation works perfectly when this file is opened by itself. </p>
<p><span id="sprytextfield1">
<input name="textfield" type="text" id="textfield" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
<p>&nbsp;</p>

Open in new window

Member_2_248744

and here is some code you might consider for your 111002.php file

I did not test these by using them, so there may be some syntax or spelling errors, but I hope that it give you some Idea of how the AJAX process and methods are different than the way you think about the usuall PHP reload the page way of thinking about doing things.

ask questions if you need more info

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryValidationTextField.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "phone_number", {format:"phone_custom", pattern:"xxx-xxxx", useCharacterMasking:true, validateOn:["blur", "change"], hint:"xxx-xxxx"});
    }
  }
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX show how it fails to work.</h2></div>
<button type="button" onclick="loadXMLDoc()">Click here to see broken form validation.</button>
</body>
</html>

Open in new window

kremzeeks

ASKER

Hi Slick182,

Thanks for the response. I created these files on the fly using Dreamweaver and left all the tags in place so that someone could easly verify things were working "as is". I've tried manipulating the javascript in every way I know including your suggestion with no luck. I'm primarily a PHP developer and have limited knowledge of JS much less jQuery and AJAX. My guess is that the issue has to do with the scope of the DOM the script is executing since it only fails when test.php is activated through 111002.php via AJAX. Could that possible be the reason?

Thanks!

Member_2_248744

OK, as far as I can tell there is no jQuery in your files at all , none,. . . . . AJAX is not the same as jQuery, although jQuery does have code sections that accomplish AJax methods. as to the javascript, , this uses the SpryValidationTextField.js as a javascript one size fits all form element validation, which is suppose to check if a text input (in your case the id="textfield") box has text in it that looks like - "555-1234" and is given it's start (initialized) with the following js -

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "phone_number", {format:"phone_custom", pattern:"xxx-xxxx", useCharacterMasking:true, validateOn:["blur", "change"], hint:"xxx-xxxx"})

which you say works when you use it in a normally loaded page without AJAX. I am not sure about what you mean when you say "issue has to do with the scope of the DOM", but in javascript (as far as I know) the DOM is always in scope, in all functions or outside of functions, and every element of the page, even ones changed by javascript like your <div id="myDiv"> . . . I do not see that the DOM is the problem, but probably how or when the Dreamweaver's built in spry validation is executed in the above line of js. since the SpryValidationTextField.js is such a large js file at 75 KB, I do not have time to go through it and try and debug it to see if I can get it to work with AJAX, but I did look at it, and it is WAY, WAY to complicated as a "one size fits all" input validation tool. I do NOT like some of the dreamweaver add in like spry validation, which takes 75 KB of javascript to do what maybe 10 or 12 lines of javascript could, to get that same validation.

I will suggest some things to try -
First, somethimes, added elements in DIV from AJAX load, are not immediately availible for javascript access, so maybe adding a timer to delay? ? see code below

I have also moved the variable sprytextfield1 outside of the function to make it global,
so you might try this code below which changes the jsvascript in the 111002.php , ,
Also, you should have some sort of javascript debug reporting turned on or installed in your browser, to see if there are errors that you can look into to fix problem.

<script type="text/javascript">
var sprytextfield1 = false;

function doTextBox()
{
sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "phone_number", {format:"phone_custom", pattern:"xxx-xxxx", useCharacterMasking:true, validateOn:["blur", "change"], hint:"xxx-xxxx"});
}


function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    setTimeout("doTextBox();",300);
    }
  }
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
</script>

Open in new window

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kremzeeks

ASKER

Wow! I would have never thought about taking that approach. Sure enough, it works perfectly like you said. Thank you so much since I've spent several hours trying to figure this out!