SimpleForm

SimpleForm

SimpleForm is supported. (WARNING: Only versions < 2.0 are supported at the moment.)

Example:

<%= simple_form_for @book, :validate => true do |book| -%>

By default SimpleForm enables HTML5 Form Validations and these conflict with the ClientSideValidations. ClientSideValidations will turn these off if a given form is told to use ClientSideValidations.

So this begs the question: If SimpleForm enables HTML5 Form Validations by default why use ClientSideValidations at all? Several reasons:

1. HTML5 Form Validations are not supported by very many browsers yet. And even in the browsers that do support them they are not 100% supported. The market is getting better, we're just not there yet.

2. You cannot style HTML5 Form Validations. The look and behavior is decided by the browser with little to no control. ClientSideValidations strives to render the errors in the same way the server would render them on form submission.

3. There are missing validations. For example, there is no way to validate by uniqueness with HTML5 Form Validations.

Change error message position

If you want to change the position of the error element you can do something like the following:

clientSideValidations.callbacks.element.after = function(element, eventData) {
  var settings = window[element.parents('form').attr('id')];
  element
    .parent(settings.wrapper_tag)
      .find(settings.error_tag + '.' + settings.error_class)
        .insertBefore(element);
}

In this case it just place the error span above the input element.

Note: It would be nice to have the settings object available in clientSideValidations.settings or pass it somehow to the callback functions.

Turn off validation per input

If you want to turn off the validation for a particular input you have to use the :input_html syntax for SimpleForm:

= simple_form_for @user, :validate => true do |user
  = user.input :email
  = user.input :username, :input_html => { :validate => false }
  = user.input :password, :input_html => { :validate => { :confirmation => false } }