Tag: validation

Posted on 01/08/2011 at 06:55AM

For part 1 of RSA-form plugin

New partials

I have added 2 new partials to Rsa-form. A registration form partial and a password entry keypad partial.


Screenshot of the Registration Partial

To include the registration form partial on your registration webpage. Include the following line in your html:

<%= render :partial => 'rsa_form/register' %>

And for those that want to design their own custom html around the password entry partials. You can simply include one of both of these lines in your html.

<%= render :partial => 'rsa_form/password1', :locals => { :name => "password]"}  %>
<%= render :partial => 'rsa_form/password2', :locals => { :name => "password_confirmation"}  %>

Here is an example of a completely custom registration page using the password partials.

<% form_tag users_path,:id=>"rsa_register_form" do -%>

      <%= label_tag 'login' %>
      <%= text_field_tag 'user[login]' %>

      <%= label_tag 'email' %>
      <%= text_field_tag 'user[email]' %>

      <%= label_tag 'password' %>
      <%= render :partial => 'rsa_form/password1', :locals => { :name => "user[password]"}  %>

      <%= label_tag 'password_confirmation' %>
      <%= render :partial => 'rsa_form/password2', :locals => { :name => "user[password_confirmation]"} %>

      <%= submit_tag 'Sign up' %>
<% end -%>

<script>
       $("form").jCryption( {getKeysURL:"/rsakey",formFieldSelector:':input:not([name=authenticity_token])',beforeEncryption:validate_inputs});       
</script>

Validate form before submission

Now you can validate the form's inputs with your browser prior to submission. This can reduce server load since the client will not contact the server until all inputs are validated. In order to do this, call jCryption with the beforeEncryption option:

$("#myencryptedform").jCryption( {getKeysURL:"/rsakey",formFieldSelector:':input:not([name=authenticity_token])',beforeEncryption:validate_inputs});

jCryption will now call validate_inputs() prior to encryption and submission. If an error is found, the submission will be cancelled. validate_inputs() is located in /javascripts/rsa-form.js and can be modified to your hearts content.

I have also added several javascript helper routines which can be used to test password, string, URL, and e-mail address validity. See /javascripts/rsa-form.js for more details.

Submitting your encrypted form's using AJAX

Say that I want to submit a form to the server using a post request to the same controller and action as normal but this time using AJAX. I want the controller to return javascript that will be executed by the client. (Such as displaying an alert or modifying the DOM on the clients browser). To do this:

  • Add the following javascript to your html or to a javascript file such as /javascripts/application.js IMPORTANT: Make sure that you add this code AFTER the call to $(form).jCryption();. If you don't, then this routine will be executed first and submit the normal unencrypted data.
$("#rsa_login_form").submit( function (){
  $.post( $(this).attr("action"), $(this).serialize(), null, 'script');
  return false;
});

  • Add code to your controller to differentiate between a normal GET/POST action and an AJAX GET/POST action. For example:
respond_to do |format|
  format.html { redirect_back_or_default('/') } # normally execute this redirect
  format.js   { @route = "/" }                  # setup a variable that will be used in the javascript view
end

  • Create a view that will be returned from the AJAX request.

Assuming that we are using a controller called 'session' and an action named 'create', create this file:

/app/views/session/create.js.erb

That contains some javascript that will be executed on the client, for example:

alert("You are successfully logged in");  // displays an alert
document.location = "{%=@route%}";        // does a redirect to the specified route

And that's about it!

There are many options available for AJAX calls, such as doing a GET instead of a POST. Returning 'json', 'xml', 'text' instead of returning 'javascript'. Please refer to the jQuery documentation for more information.


Tags: ajax, form, rsa, authentication, rails, validation