[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Spry form validation on AJAX generated sub-pages

Posted on 2011-10-02
6
Medium Priority
?
352 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:kremzeeks
  • 4
  • 2
6 Comments
 
LVL 34

Expert Comment

by:Slick812
ID: 36905237
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

0
 
LVL 34

Expert Comment

by:Slick812
ID: 36905273
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

0
 

Author Comment

by:kremzeeks
ID: 36906015
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!
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 34

Expert Comment

by:Slick812
ID: 36906999
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

0
 
LVL 34

Accepted Solution

by:
Slick812 earned 2000 total points
ID: 36911804
I had some time, so I did a HTML page to test your Spry stuff, I decided to just do a Javascript DIV replacement, without any AJAX to see if the Spry validation would go into a javascript modified div. Sure enough it worked without any problems the very first time I tried it. See the code below for what I did, although I did NOT use any ajax, the ajax return will just do what I did here, replace the innerHTML for a DIV with a text box in a <span id="sprytextfield1">  span thing.
<!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>Spry Validation TEST</title>
<script src="SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var sprytextfield1;
var divNew = '<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>';

function getDom1(elmt1){return document.getElementById(elmt1);}
if(document.getElementById){gtDom1=1;}else if(document.all)gtDom1=2;
if(gtDom1==0){setTimeout("alert('ERROR - NO Functions! Your OLD Web Browser does NOT have the Functions for this Page.');",2000);}else
	if(gtDom1==2){getDom1 = function(elmt1){return document.all[elmt1];}}
function setOnce(elmt1,out1){var Dobj=getDom1(elmt1);Dobj.innerHTML=out1;Dobj=null;}

function doNew(){
setOnce("aRe", divNew);
sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "phone_number", {format:"phone_custom", pattern:"000-0000", useCharacterMasking:true, validateOn:["blur", "change"], hint:"xxx-xxxx"});
}
</script>
</head><body>
<p>This is a TEST for the SPRY Validation stuff. </p>
<input type="button" value=" Do New Div " onclick="doNew();"/><hr />
<div id="aRe" style="background:#fed;border:solid 4px #811;padding:4px;">
Some text to see here<br />OK next line
</div>
<p> - - - - - -</p>
</body></html>

Open in new window

0
 

Author Comment

by:kremzeeks
ID: 36917215
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!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Suggested Courses
Course of the Month19 days, 18 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question