[wp-trac] [WordPress Trac] #5299: JS/AJAX form validation

[WordPress Trac]

#5299: JS/AJAX form validation
----------------------+-----------------------------------------------------
 Reporter:  mdawaffe  |       Owner:  anonymous
     Type:  defect    |      Status:  new      
 Priority:  normal    |   Milestone:  2.4      
Component:  General   |     Version:           
 Severity:  normal    |    Keywords:           
----------------------+-----------------------------------------------------
 Due to the new jQuery list manipulation code, there are a few forms in WP
 that, when submitted with no data (e.g. with a stray click or return),
 respond with "AJAX is teh b0rked".

 That's a error message not meant to be seen by users :)

 Currently, the jQuery wp-lists JS offers a few hooks where custom, per-
 form JS can be written to do arbitrary form validation and to prevent bad
 submissions.  But repeating for each form "don't bother to submit if the
 form is empty.  Display feedback as necessary instead" is obnoxious.

 Also, WP can already do arbitrary form validation using the WP_Error class
 (witness the Add User form), but could be touched up a bit to give better
 feedback.

 Proposed :

  1. Via JS:  If a form element is empty and has some ancestor element with
 class "required", that ancestor element gets a new "invalid" class and the
 form is not submitted.  Rationale:  We know right away something is wrong,
 so we give feedback without having to send a request to the server.
  2. Via AJAX: If a WP_Error object is returned in the AJAX response (via
 the WP_Ajax_Response class), match up the error codes with the form
 elements and give a new "invalid" class to the first ancestor element with
 class "form-field" for each of  those matching form elements.  Also
 display the error messages as we currently do.  Rationale:  Since we can't
 know client side that the data is valid (without writing a lot of extra
 JS), we submit via AJAX and give feedback based on any WP_Error objects.

 Example :

 {{{
 <form method="post" action="">
 <table>
   <tr class="form-field required">
     <td>Name</td>
     <td><input type="text" name="name" /></td>
   </tr>
   <tr class="form-field">
     <td>Age</td>
     <td><input type="text" name="age" /></td>
   </tr>
 </table>
 </form>
 }}}

 If a user tries to submit an empty form, the first TR will immediately
 gets the "invalid" class and the form is not submitted.  Why?  It has the
 "required" class and  one of it's descendants is an empty form element.

 If the user enters a "Shirley" into the name field and "young" in the age
 field and submits, suppose a WP_Error object is returned:

 {{{
 object(wp_error)(2) {
   ["errors"]=>
   array(1) {
     ["age"]=>
     array(1) {
       [0]=>
       string(31) "You must give your age in years"
     }
   }
   ["error_data"]=>
   array(0) {
   }
 }
 }}}

 The TR with the age field in it is given the "invalid class" and the error
 message is shown.  Why?  Because the returned WP_Error object contains an
 error with code "age".


 So we'd have 3 methods of form validation.

  1. Current hooks in wp-lists JS that allow submission to be
 canceled/relegated to traditional (non-AJAX) request.
  2. Looking for blank inputs in elements with the "required" class.
  3. Interpreting WP_Error objects sent back in the AJAX response.


 Attached :

  1. Implements proposal.
  2. Uses method 1 (current hooks) to prevent submission of blank on-the-
 fly AJAX category adding to posts on the Write screen.
  3. Uses methods 2 (required) and 3 (WP_Error) in concert to validate
 other AJAX based forms:  Category adding from Manage -> Categories and
 Blogroll -> Categories, User adding from Users.

 To Test :

  1. Hit enter in a blank Add New User form.  Name, email, password should
 turn red.
  2. Enter " " as name, " " as email, "1" as password 1, "2" as password 2
 in Add New User form.  Submit.  Fields should turn red, and detailed
 explanations are given.
  3. Hit enter in blank ajax-cat form on Write -> Post screen.  Nothing
 should happen.
  4. Enter "{{{,,}}}" (three blank categories) into ajax-cat form.  Submit.
 Request is actually submitted, but nothing will happen server side (good),
 and nothing will happen after response comes through (good).
  5. Submit blank Add New Category form (Manage -> Categories).  Name
 should turn red.
  6. Enter " " as name in Add New Category form.  Submit.  Name should turn
 red, should get error message.
  7. Repeat 5, 6 for Blogroll -> Categories form.

-- 
Ticket URL: <http://trac.wordpress.org/ticket/5299>
WordPress Trac <http://trac.wordpress.org/>
WordPress blogging software