Here's a quick demo that does something like you want. The HTML page contains a form with 4 fields: only two of these feature ajax-enabled verification. An XMLHttpRequest object is created for each field, since each will be verified independently (most examples I have found online show a single object making a single request - often sending back multiple results which update multiple parts of the page. Here, each object sends a request for one form element and sends back a single result.) The onChange event is triggered when you enter a value then tab to the next field. For this example, I have one script to verify the "word" value, and another script to verify the "number" value. You could, of course, combine these together, and have one request call a single script to validate both, and send back results for each, etc.

verify.htm 

<html>
<head>
<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
<title>Ajax Form Verify</title>

<script type="text/javascript">

function createRequestObject() {
  var req;
  if (window.XMLHttpRequest) { // Firefox, Safari, Opera...
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // Internet Explorer 5+
    req = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    // error creating the request object,
    // (maybe an old browser is being used?)
    alert('There was a problem creating the XMLHttpRequest object');
    req = '';
  }
  return req;
}

// Make the XMLHttpRequest object
var http_number = createRequestObject();
var http_word = createRequestObject();

function verifyNumberRequest() {
  var number = document.getElementById("number").value;
  if ( number ) {
    var url = 'http://www.YOURHOSTHERE.com/cgi-bin/verify_number.pl?nu
+mber='+number;
    http_number.open('get', url );
    http_number.onreadystatechange = handleNumberResponse;
    http_number.send(null);
  }
}

function verifyWordRequest() {
  var word = document.getElementById("word").value;
  if ( word ) {
    var url = 'http://www.YOURHOSTHERE.com/cgi-bin/verify_word.pl?word
+='+word;
    http_word.open('get', url );
    http_word.onreadystatechange = handleWordResponse;
    http_word.send(null);
  }
}


function handleNumberResponse() {
  if(http_number.readyState == 4 && http_number.status == 200){
    var response = http_number.responseText; // Text returned FROM per
+l script
    if(response) { // UPDATE ajaxTest content
      document.getElementById("number_verify_result").innerHTML = resp
+onse;
    }
  }
}

function handleWordResponse() {
  if(http_word.readyState == 4 && http_word.status == 200){
    var response = http_word.responseText; // Text returned FROM perl 
+script
    if(response) { // UPDATE ajaxTest content
      document.getElementById("word_verify_result").innerHTML = respon
+se;
    }
  }
}

</script>
</head>
<body>
<h1>Ajax Form Verify Demo</h1>
<form>
<table>
<tr>
<td> Enter color: </td>
<td> <input type="text" name="color"> </td>
<td> &nbsp; </td>
</tr>
<tr>
<td> Enter 4 digit number: </td>
<td> <input type="text" name="number" id="number" onchange="verifyNumb
+erRequest();return true;"></td>
<td> <div id="number_verify_result"> &nbsp; </div> </td>
</tr>
<tr>
<td> Enter 4 letter word: </td>
<td><input type="text" name="word" id="word" onchange="verifyWordReque
+st();return true;"></td>
<td> <div id="word_verify_result"> &nbsp; </div> </td>
</tr>
<tr>
<td> Enter name: </td>
<td> <input type="text" name="name"> </td>
<td> &nbsp; </td>
</tr>
</table>
</form>
<hr/>
</body>
</html>

[download]

verify_number.pl 

#!/usr/bin/perl
# script to verify that value is a 4 digit number

use strict;
use CGI qw(:all);

$|=1; # no I/O buffering

my $number = param("number") || '';

print "content-type: text/html\n\n";
if ( $number =~ /\b\d{4}\b/ ) {
  print "<p style=\"font-family: courier; color: green\"><-- OK</p>\n"
+;
} else {
  print "<p style=\"font-family: courier; color: red\"><-- ERROR: not 
+a 4 digit number!</p>\n";
}

[download]

verify_word.pl 

#!/usr/bin/perl
# script to verify that value is a 4 letter word

use strict;
use CGI qw(:all);

$|=1; # no I/O buffering

my $word = param("word") || '';

print "content-type: text/html\n\n";
if ( $word =~ /\b\w{4}\b/ ) {
  print "<p style=\"font-family: courier; color: green\"><-- OK</p>\n"
+;
} else {
  print "<p style=\"font-family: courier; color: red\"><-- ERROR: not 
+a 4 letter word!</p>\n";
}

[download]

In reply to Re: AJAX'ifying a web form and dynamic server validation through Perl by scorpio17
in thread AJAX'ifying a web form and dynamic server validation through Perl by hacker

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.