PHP
Template
Execution


<?php



// include TPLN

include('TPLN/TPLN.php');



$TPLN =& new TPLN;

$TPLN->formSetDisplayMode('T');



$TPLN->open('ajax_form.html');



// rules

$TPLN->notEmpty('Firstname');

$TPLN->alphaNumeric('Firstname', '_'); // only characters and _

$TPLN->notEmpty('FamilyName');

$TPLN->notEmpty('Email');

$TPLN->email('Email');





if($TPLN->formIsValid())

{

    // treatment here

}





if(!$_POST)

{

    $TPLN->write();

}

else

{

    echo $TPLN->getAjaxBloc('form_error');

}





?>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ajax Form Validation Example</title>
    <link href="../style.css" rel="stylesheet" type="text/css" />

    
    <script language="javascript" src="jquery-1.2.6.min.js"></script>
    <script language="javascript" src="jquery.form.js"></script>
    

</head>

<body>

<div id="form_error">

<bloc::form_error>
    • {msg}<br>
</bloc::form_error>

</div>

<form id="form" name="form" method="post" action="">
    Fistname <input name="Firstname" type="text" id="Firstname" size="65" /><br>
    FamilyName <input name="FamilyName" type="text" id="FamilyName" size="65" /><br>
    Email <input name="Email" type="text" id="Email" size="65" /><br>
    <br>
    <br>
    <input type="submit" name="Submit" value="Submit" /></td>
</form>

<div id="form_valid">
It is ok your form is submitted with no error and the treatment is done !
</div>

<script>
var options = {
    beforeSubmit:  showRequest,  // pre-submit callback
    success:       showResponse  // post-submit callback
};
$('#form').ajaxForm(options);

function showRequest(formData, jqForm, options) {
    var queryString = $.param(formData);
    return true;
}

function showResponse(responseText, statusText)  {
    /*alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
        '\n\nThe output div should have already been updated with the responseText.'); */

    // errors ?
    resp = responseText;

    if(jQuery.trim(resp) != '')
    {
        $('div#form_error').html(resp);
        $('div#form_error').slideDown('fast');
    }
    else
    {
        $('#form').hide();
        $('div#form_error').hide();
        $('div#form_valid').show('fast');
    }

}
$('#form_error').hide();
$('#form_valid').hide();
</script>

<br>
<br>
{_Logo}<font size="1"> in {_Chrono} s<br>
Queries executed: {_QueryCount}</font>

</body>
</html>

Sample> Ajax Form