<nephtali>

A simple, flexible, fast, and security-focused PHP framework
Nephtali documentation

Contact form (redux)

Leverage the REST-ful API automatically available on Nephtali pages to progressively enhance client-side interactions on a contact form. View the first contact form example to see the markup for the form and the PHP.

REST-ful API overview

Validation

Validate data against any registered port. To put the page in validation mode, just include the GET variables 'nmode=validate' and 'nports=comma-separated-port-names'.

View the JSON output created by validating a search term that's too long against the 'q' port regsitered for the Nephtali search results page:

» Bad search term, bad!

HTML fragments

Retrieve the HTML fragment generated by any registered pipe. To put the page in HTML fragment mode, just included the GET variables 'nmode=htmlfrag' and 'npipe=pipe-name'.

View the HTML fragment for the listing of shared host providers that support PHP 5.3:

» Good web hosts, good!

Client-side validation

The markup for the form and feedback and the PHP code can be found in the first contact form example.

Although the REST-ful API could easily be leveraged by basic javascript, we'll use jQuery and the Nephtali Remote Validation plugin to speed things up. The plugin validates values against their corresponding ports when the user leaves a field.

Javascript in contact/index.php

$("form").validate({
   renderInvalid: function(field, errorMsg){
      field.removeClass("invalid")
         .removeClass("valid")
         .addClass("invalid");
      // remove any existing span
      $('#' + field.attr("name") + '-feedback').remove();
      field.after(
         "<span id=\"" 
         + field.attr("name")
         + "-feedback\" class=\"field-feedback hidden\">"
         + errorMsg + "<\/span>"
      );
   },
   renderValid: function(field){
      field.removeClass("invalid")
         .removeClass("valid")
         .addClass("valid");
      $('#'+field.attr("name")+'-feedback').remove();
   },
   highlightError: function(field){
      // not using in this simple example
   }
});

Example screenshot of feedback

Screenshot of Nephtali contact form client-side validation.

Client-Side Page Updates

Again, although you could use basic javascript or any number of other libraries, we'll use jQuery to process the form submission and retrieve the appropriate feedback.

Javascript in contact/index.php

$("form").submit(function(event){
   var url = "http://nephtaliproject.com/contact/?"
      + "nmode=htmlfrag&npipe=mail";
   $("#status").html(
      "<img src='/ajax-loader.gif' width='16' height='16' />"
   );
   $.post(
      url,
      {
         "name" : $("#name").val(),
         "email" : $("#email").val(),
         "message" : $("#message").val()
      },
      function(data) {
         $('#status').html(data);
      }
   );
   event.preventDefault();
});

Results

With the javascript in place, the form now submits the data via ajax, displaying the status indicators (the image and text below) to inform the user that the application is waiting for a response:

LOADING …

Once a response is loaded, the retrieved HTML fragment is used to replace the status indicators.

You can view the live contact form for this website to see a working example.

blog comments powered by Disqus