How to validate an Ajax Form Submit (remote_form_tag) ?

Question

I have an ajax mail form like

  - form_remote_tag :url=>mails_path,:condition=>"validate_mail()", :html => {:id=>"mailform",:method => :post, :class => 'ajax',:style=>"padding:15px;" } do |form|
    .gimmespace 
      Naam 
      %br
      = text_field_tag :name,params[:name],:class=>"title required"
    .gimmespace 
      Telefoonnummber 
      %br
      = text_field_tag :phone,params[:phone],:size=>25,:class=>"title"
    .gimmespace 
      Mailadres 
      %br
      = text_field_tag :email,params[:email],:size=>30,:class=>"title required"
    .gimmespace 
      Onderwerp 
      %br
      = text_field_tag :subject,params[:subject],:class=>"title required"
    .gimmespace
      Boodschap 
      %br
      = text_area_tag :message,params[:message],:rows=>10,:cols=>45,:class=>"title required"
    .gimmespace
      = submit_tag "Verstuur",:id=>"mailsubmit",:class=>"sendBtn"
      %button{:onclick=>"$.fn.colorbox.close();"} Annuleer

The above code is in HAML. It makes an ajax form submit to a controller. I have to validate the fields before it makes a submit. So, I tried several stuff. I read this article http://hillemania.wordpress.com/2006/09/18/rails-ajax-pre-submit-form-validation/ and made a before callback to a test javascript function to validate. Here is the javascript validating function.

function validate_mail() {
        alert("Your Name, Email, Subject and Body Content are Required !");
        return false;

}

As per the above function, it returns false any way and the form should not get submitted but, it submits well ajaxically. Is there any other way, please help.

Answer 1

I think you want to use the :condition option instead of the :before option. Something like this:

  - form_remote_tag :url=> mails_path, :condition => "validate_mail()", ...

Then, if your condition function returns false, the form shouldn't be submitted.

Of course, you'll need to modify your validate_mail() function actually test that each form field isn't blank:

if ($('name').value == '' || $('phone').value == '' || ... ) {
  alert('Something was blank...');
  return false;
} else {
  return true;
}

My Prototype syntax is rusty - that should get you on the right track though.