tsemple/app/views/users/new.html.slim

.main
  .container
    .row
      .col-md-6.col-md-offset-3
        .panel
          .panel-heading
            h3.panel-title
              = t '.sign_up'
          .panel-body
            = form_for @user, html: { id: 'new-user-form' } do |f|
              = render 'share/form_error_messages', form: f
              .form-group
                = f.label :name, class: 'control-label'
                = f.text_field :name, placeholder: t('.your_full_name'), tabindex: 1, class: 'form-control'
              .form-group
                = f.label :email, class: 'control-label'
                = f.text_field :email, placeholder: t('.your_email'), tabindex: 2, class: 'form-control'
              .form-group
                = f.label :username, class: 'control-label'
                = f.text_field :username, placeholder: t('.pick_a_username'), tabindex: 3, class: 'form-control'
              .form-group
                = f.label :password, class: 'control-label'
                = f.password_field :password, placeholder: t('.choose_a_password'), tabindex: 4, class: 'form-control'
              = f.submit t('.create_account'), class: 'btn btn-success', tabindex: 5

javascript:
  $('#new-user-form').validate({
    rules: {
      'user[name]': {
        required: true,
      },
      'user[email]': {
        required: true,
        format: /^([^@\s]+)@((?:[a-z0-9-]+\.)+[a-z]{2,})$/i,
        remote: '/users/check_email'
      },
      'user[username]': {
        required: true,
        remote: '/users/check_username',
        format: /^[a-z0-9-]+$/i
      },
      'user[password]': {
        required: true
      }
    },
    messages: {
      'user[name]': {
        required: '#{@user.errors.generate_message :name, :blank}'
      },
      'user[email]': {
        required: '#{@user.errors.generate_message :email, :blank}',
        remote: '#{@user.errors.generate_message :email, :taken}',
        format: '#{@user.errors.generate_message :email, :format}'
      },
      'user[username]': {
        required: '#{@user.errors.generate_message :username, :blank}',
        remote: '#{@user.errors.generate_message :username, :taken}',
        format: '#{@user.errors.generate_message :username, :format}'
      },
      'user[password]': {
        required: '#{@user.errors.generate_message :password, :blank}'
      }
    }
  });