<div>
greetings kremzeeks, &nbsp;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 &nbsp;111002.php &nbsp;. 
First, you do not need and should not have the any of the - 
&lt;html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml" rel="ugc">http://www.w3.org/1999/xhtml</a>&quot;&gt; 
 
usual web page set up html tags like &lt;!DOCTYPE&gt;, &lt;HTML&gt;, &lt;HEAD&gt;, &lt;TITLE&gt;, &lt;BODY&gt; 
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 - 
&lt;div id=&quot;myDiv&quot;&gt; 
so adding the extra &lt;!DOCTYPE&gt;, &lt;HTML&gt;, &lt;HEAD&gt;, &lt;TITLE&gt;, &lt;BODY&gt; &nbsp;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 &lt;DIV&gt; 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 &lt;DIV&gt; 
 
below is some code that you might consider for your &nbsp;test.php &nbsp;file 
 

<pre><code class="code-1 nolinks" id="code-8224217">&lt;p&gt;Form validation works perfectly when this file is opened by itself. &lt;/p&gt;
&lt;p&gt;&lt;span id=&quot;sprytextfield1&quot;&gt;
&lt;input name=&quot;textfield&quot; type=&quot;text&quot; id=&quot;textfield&quot; /&gt;
&lt;span class=&quot;textfieldRequiredMsg&quot;&gt;A value is required.&lt;/span&gt;&lt;span class=&quot;textfieldInvalidFormatMsg&quot;&gt;Invalid format.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
</code></pre>
</div>

<div>
and here is some code you might consider for your &nbsp;111002.php &nbsp;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 

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

&lt;script type=&quot;text/javascript&quot;&gt;
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(&quot;Microsoft.XMLHTTP&quot;);
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
 {
 document.getElementById(&quot;myDiv&quot;).innerHTML=xmlhttp.responseText;
	var sprytextfield1 = new Spry.Widget.ValidationTextField(&quot;sprytextfield1&quot;, &quot;phone_number&quot;, {format:&quot;phone_custom&quot;, pattern:&quot;xxx-xxxx&quot;, useCharacterMasking:true, validateOn:[&quot;blur&quot;, &quot;change&quot;], hint:&quot;xxx-xxxx&quot;});
 }
 }
xmlhttp.open(&quot;GET&quot;,&quot;test.php&quot;,true);
xmlhttp.send();
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id=&quot;myDiv&quot;&gt;&lt;h2&gt;Let AJAX show how it fails to work.&lt;/h2&gt;&lt;/div&gt;
&lt;button type=&quot;button&quot; onclick=&quot;loadXMLDoc()&quot;&gt;Click here to see broken form validation.&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

<div>
Hi Slick182, 
 
Thanks for the response. &nbsp;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 &quot;as is&quot;. &nbsp;I've tried manipulating the javascript in every way I know including your suggestion with no luck. &nbsp;I'm primarily a PHP developer and have limited knowledge of JS much less jQuery and AJAX. &nbsp;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. &nbsp;Could that possible be the reason? 
 
Thanks!
</div>

<div>
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 &nbsp;SpryValidationTextField.js &nbsp;as a javascript one size fits all form element validation, which is suppose to check if a text input (in your case the id=&quot;textfield&quot;) box has text in it that looks like - &quot;555-1234&quot; and is given it's start (initialized) with the following js - 
 
var sprytextfield1 = new Spry.Widget.ValidationTextField(&quot;sprytextfield1&quot;, &quot;phone_number&quot;, {format:&quot;phone_custom&quot;, pattern:&quot;xxx-xxxx&quot;, useCharacterMasking:true, validateOn:[&quot;blur&quot;, &quot;change&quot;], hint:&quot;xxx-xxxx&quot;}) 
 
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 &quot;issue has to do with the scope of the DOM&quot;, 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 &lt;div id=&quot;myDiv&quot;&gt; . . . 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. &nbsp;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 &quot;one size fits all&quot; 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 &nbsp;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. 

<pre><code class="code-10 nolinks" id="code-8224279">&lt;script type=&quot;text/javascript&quot;&gt;
var sprytextfield1 = false;

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


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(&quot;Microsoft.XMLHTTP&quot;);
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
 {
 document.getElementById(&quot;myDiv&quot;).innerHTML=xmlhttp.responseText;
 setTimeout(&quot;doTextBox();&quot;,300);
 }
 }
xmlhttp.open(&quot;GET&quot;,&quot;test.php&quot;,true);
xmlhttp.send();
}
&lt;/script&gt;
</code></pre>
</div>

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

<div>
<div class="content wysiwyg-content">
Hello, 
 
I know this is likely to be an easy question, but it has really stumped me. &nbsp;I'm using Dreamweaver's built in spry validation for forms. &nbsp;It works perfectly, but breaks on sub-pages being accessed through AJAX. &nbsp;I've spent many hours searching for answers and manipulating &nbsp;the files with no solution. &nbsp;I'm assuming it's because the sub-page is not initially loaded. &nbsp;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! 
<a href="https://filedb.experts-exchange.com/incoming/2011/10_w41/508667/111002.php" target="_blank" class="file-inline" title="Main file (750 bytes)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>111002.php</a> 
<a href="https://filedb.experts-exchange.com/incoming/2011/10_w41/508668/test.php" target="_blank" class="file-inline" title="sub-page (1 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>test.php</a> 
<a href="https://filedb.experts-exchange.com/incoming/2011/10_w41/508669/SpryValidationTextField.css" target="_blank" class="file-inline" title="spry css (3 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>SpryValidationTextField.css</a> 
<a href="https://filedb.experts-exchange.com/incoming/2011/10_w41/508670/SpryValidationTextField.js" target="_blank" class="file-inline" title="spry javascript (75 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>SpryValidationTextField.js</a>
</div>
</div>

SpryValidationTextField.js

111002.php

test.php

SpryValidationTextField.css

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!

Spry form validation on AJAX generated sub-pages

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

AJAX

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.