af-client_side_validations 3.1.4.af1

data/test/javascript/public/test/form_builders/validateSimpleForm.js

@@ -0,0 +1,57 @@
+module('Validate SimpleForm', {
+  setup: function() {
+    window['new_user'] = {
+      type: 'SimpleForm::FormBuilder',
+      error_class: 'error',
+      error_tag: 'span',
+      wrapper_error_class: 'field_with_errors',
+      wrapper_tag: 'div',
+      validators: {
+        "user[name]":{"presence":{"message": "must be present"}, "format":{"message":"is invalid","with":/\d+/}}
+      }
+    }
+
+    $('#qunit-fixture')
+      .append($('<form />', {
+        action: '/users',
+        'data-validate': true,
+        method: 'post',
+        id: 'new_user'
+      }))
+      .find('form')
+        .append('<div />').find('div')
+          .append($('<input />', {
+            name: 'user[name]',
+            id: 'user_name',
+            'data-validate': 'true',
+            type: 'text'
+          }))
+          .append($('<label for="user_name">Name</label>'));
+    $('form#new_user').validate();
+  }
+});
+
+test('Validate error attaching and detaching', function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+  ok(input.parent().find('span.error:contains("must be present")')[0]);
+
+  input.val('abc')
+  input.trigger('change')
+  input.trigger('focusout')
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+  ok(input.parent().find('span.error:contains("is invalid")')[0]);
+
+  input.val('123')
+  input.trigger('change')
+  input.trigger('focusout')
+  ok(!input.parent().hasClass('field_with_errors'));
+  ok(!label.parent().hasClass('field_with_errors'));
+  ok(!input.parent().find('span.error')[0]);
+});
+

data/test/javascript/public/test/settings.js

@@ -0,0 +1,15 @@
+// hijacks normal form submit; lets it submit to an iframe to prevent
+// navigating away from the test suite
+$(document).bind('submit', function(e) {
+  if (!e.isDefaultPrevented()) {
+    var form = $(e.target), action = form.attr('action'),
+        name = 'form-frame' + jQuery.guid++,
+        iframe = $('<iframe name="' + name + '" />');
+
+    if (action.indexOf('iframe') < 0) form.attr('action', action + '?iframe=true')
+    form.attr('target', name);
+    $('#qunit-fixture').append(iframe);
+    form.trigger('iframe:loading');
+  }
+});
+

data/test/javascript/public/test/validateElement.js

@@ -0,0 +1,209 @@
+module('Validate Element', {
+  setup: function() {
+    window['new_user'] = {
+      type: 'ActionView::Helpers::FormBuilder',
+      input_tag: '<div class="field_with_errors"><span id="input_tag" /><label for="user_name" class="message"></label></div>',
+      label_tag: '<div class="field_with_errors"><label id="label_tag" /></div>',
+      validators: {
+        'user[name]':{"presence":{"message": "must be present"}, "format":{"message":"is invalid","with":/\d+/}},
+        'user[password]':{"confirmation":{"message": "must match confirmation"}},
+        'user[agree]':{"acceptance": {"message": "must be accepted"}},
+        'user[email]':{"uniqueness":{"message": "must be unique"},"presence":{"message": "must be present"}},
+        'user[phone_numbers_attributes][][number]':{"presence":{"message": "must be present"}}
+      }
+    }
+
+    $('#qunit-fixture')
+      .append($('<form />', {
+        action: '/users',
+        'data-validate': true,
+        method: 'post',
+        id: 'new_user'
+      }))
+      .find('form')
+        .append($('<label for="user_name">Name</label>'))
+        .append($('<input />', {
+          name: 'user[name]',
+          id: 'user_name',
+          'data-validate': 'true',
+          type: 'text'
+        }))
+        .append($('<label for="user_password">Password</label>'))
+        .append($('<input />', {
+          name: 'user[password]',
+          id: 'user_password',
+          'data-validate': 'true',
+          type: 'password'
+        }))
+        .append($('<label for="user_password_confirmation">Password Confirmation</label>'))
+        .append($('<input />', {
+          name: 'user[password_confirmation]',
+          id: 'user_password_confirmation',
+          type: 'password'
+        }))
+        .append($('<label for="user_agree">Agree</label>'))
+        .append($('<input />', {
+          name: 'user[agree]',
+          id: 'user_agree',
+          'data-validate': 'true',
+          type: 'checkbox',
+          value: 1
+        }))
+        .append($('<input />', {
+          name: 'user[email]',
+          id: 'user_email',
+          'data-validate': 'true',
+          type: 'text'
+        }))
+        .append($('<label for="user_phone_numbers_attributes_0_number">Phone Number</label>'))
+        .append($('<input />', {
+          name: 'user[phone_numbers_attributes][0][number]',
+          id: 'user_phone_numbers_attributes_0_number',
+          'data-validate': 'true',
+          type: 'text'
+        }))
+        .append($('<label for="user_phone_numbers_attributes_1_number">Phone Number</label>'))
+        .append($('<input />', {
+          name: 'user[phone_numbers_attributes][1][number]',
+          id: 'user_phone_numbers_attributes_1_number',
+          'data-validate': 'true',
+          type: 'text'
+        }))
+    $('form#new_user').validate();
+  }
+});
+
+test('Validate when focusouting', function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate when checkbox is clicked', function() {
+  var form = $('form#new_user'), input = form.find('input#user_agree');
+  var label = $('label[for="user_agree"]');
+
+  input.attr('checked', false)
+  input.trigger('click');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate when focusout on confirmation', function() {
+  var form = $('form#new_user'), password = form.find('input#user_password'), confirmation = form.find('input#user_password_confirmation');
+  var label = $('label[for="user_password"]');
+
+  password.val('password');
+  confirmation.trigger('focusout');
+  ok(password.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate nested attributes', function() {
+  var form = $('form#new_user'), input, label;
+  
+  input = form.find('input#user_phone_numbers_attributes_1_number');
+  label = $('label[for="user_phone_numbers_attributes_1_number"]');
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+
+  input = form.find('input#user_phone_numbers_attributes_0_number');
+  label = $('label[for="user_phone_numbers_attributes_0_number"]');
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate when keyup on confirmation', function() {
+  var form = $('form#new_user'), password = form.find('input#user_password'), confirmation = form.find('input#user_password_confirmation');
+  var label = $('label[for="user_password"]');
+
+  password.val('password');
+
+  confirmation.trigger('keyup');
+  ok(password.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+
+  confirmation.val('password')
+  confirmation.trigger('keyup');
+  ok(!password.parent().hasClass('field_with_errors'));
+  ok(!label.parent().hasClass('field_with_errors'));
+});
+
+test('Forcing remote validators to run last', function() {
+  var form = $('form#new_user'), input = form.find('input#user_email');
+
+  input.trigger('focusout');
+  equal(input.parent().find('label').text(), "must be present")
+});
+
+test("Don't validate when value hasn't changed", function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+
+  input.val('123');
+  input.trigger('focusout');
+  ok(input.parent().hasClass('field_with_errors'));
+  ok(label.parent().hasClass('field_with_errors'));
+
+  input.trigger('change');
+  input.trigger('focusout');
+  ok(!input.parent().hasClass('field_with_errors'));
+  ok(!label.parent().hasClass('field_with_errors'));
+});
+
+test('Validate when error message needs to change', function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('focusout');
+  equal(input.parent().find('label.message').text(), "must be present");
+  input.val('abc');
+  input.trigger('change')
+  input.trigger('focusout');
+  equal(input.parent().find('label.message').text(), "is invalid");
+})
+
+test("Don't validate confirmation when not a validatable input", function() {
+  $('#qunit-fixture')
+    .append($('<form />', {
+      action: '/users',
+      'data-validate': true,
+      method: 'post',
+      id: 'new_user_2'
+    }))
+    .find('form')
+      .append($('<label for="user_2_password">Password</label>'))
+      .append($('<input />', {
+        name: 'user_2[password]',
+        id: 'user_2_password',
+        type: 'password'
+      }))
+      .append($('<label for="user_2_password_confirmation">Password Confirmation</label>'))
+      .append($('<input />', {
+        name: 'user_2[password_confirmation]',
+        id: 'user_2_password_confirmation',
+        type: 'password'
+      }))
+  new_user_2 = {
+    type: 'ActionView::Helpers::FormBuilder',
+    input_tag: '<div class="field_with_errors"><span id="input_tag" /><label for="user_name" class="message"></label></div>',
+    label_tag: '<div class="field_with_errors"><label id="label_tag" /></div>',
+    validators: {
+    }
+  }
+  $('form#new_user_2').validate();
+  var form = $('form#new_user_2'), input = form.find('input#user_2_password_confirmation');
+  input.val('123');
+  input.trigger('focusout');
+  ok(!input.parent().hasClass('field_with_errors'));
+});
+

data/test/javascript/public/test/validators/acceptance.js

@@ -0,0 +1,42 @@
+module('Acceptance options');
+
+test('when checkbox and checked', function() {
+  var element = $('<input type="checkbox" />');
+  var options = { message: "failed validation" };
+  element.attr('checked', true)
+  equal(clientSideValidations.validators.local.acceptance(element, options), undefined);
+});
+
+test('when checkbox and not checked', function() {
+  var element = $('<input type="checkbox" />');
+  var options = { message: "failed validation" };
+  equal(clientSideValidations.validators.local.acceptance(element, options), "failed validation");
+});
+
+test('when text and value default of 1', function() {
+  var element = $('<input type="text" />');
+  var options = { message: "failed validation" };
+  element.val("1");
+  equal(clientSideValidations.validators.local.acceptance(element, options), undefined);
+});
+
+test('when text and value 2 and accept value is 2', function() {
+  var element = $('<input type="text" />');
+  var options = { message: "failed validation", accept: 1 };
+  element.val("1");
+  equal(clientSideValidations.validators.local.acceptance(element, options), undefined);
+});
+
+test('when text and value empty', function() {
+  var element = $('<input type="text" />');
+  var options = { message: "failed validation" };
+  equal(clientSideValidations.validators.local.acceptance(element, options), "failed validation");
+});
+
+test('when text and value 1 and accept value is 2', function() {
+  var element = $('<input type="text" />');
+  var options = { message: "failed validation", accept: 2 };
+  element.val("1");
+  equal(clientSideValidations.validators.local.acceptance(element, options), "failed validation");
+});
+

data/test/javascript/public/test/validators/confirmation.js

@@ -0,0 +1,25 @@
+module('Confirmation options', {
+  setup: function() {
+    $('#qunit-fixture')
+      .append('<input id="password" type="password" />')
+      .append('<input id="password_confirmation" type="password" />')
+  }
+});
+
+test('when values match', function() {
+  var password_element = $('#password');
+  var password_confirmation_element = $('#password_confirmation');
+  var options = { message: "failed validation" };
+  password_element.val('test');
+  password_confirmation_element.val('test');
+  equal(clientSideValidations.validators.local.confirmation(password_element, options), undefined);
+});
+
+test('when values match', function() {
+  var password_element = $('#password');
+  var password_confirmation_element = $('#password_confirmation');
+  var options = { message: "failed validation" };
+  password_element.val('test');
+  password_confirmation_element.val('bad test');
+  equal(clientSideValidations.validators.local.confirmation(password_element, options), "failed validation");
+});

data/test/javascript/public/test/validators/exclusion.js

@@ -0,0 +1,41 @@
+module('Exclusion options');
+
+test('when value is not in the list', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'in': [1, 2, 3] };
+  element.val('4');
+  equal(clientSideValidations.validators.local.exclusion(element, options), undefined);
+});
+
+test('when value is not in the range', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'range': [1, 3] };
+  element.val('4');
+  equal(clientSideValidations.validators.local.exclusion(element, options), undefined);
+});
+
+test('when value is in the list', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'in': [1, 2, 3] };
+  element.val('1');
+  equal(clientSideValidations.validators.local.exclusion(element, options), "failed validation");
+});
+
+test('when value is in the range', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'range': [1, 3] };
+  element.val('1');
+  equal(clientSideValidations.validators.local.exclusion(element, options), "failed validation");
+});
+
+test('when allowing blank', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'in': [1, 2, 3], allow_blank: true };
+  equal(clientSideValidations.validators.local.exclusion(element, options), undefined);
+});
+
+test('when not allowing blank', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'in': [1, 2, 3] };
+  equal(clientSideValidations.validators.local.exclusion(element, options), "failed validation");
+});

data/test/javascript/public/test/validators/format.js

@@ -0,0 +1,27 @@
+module('Format options');
+
+test('when matching format', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'with': /\d+/ };
+  element.val('123');
+  equal(clientSideValidations.validators.local.format(element, options), undefined);
+});
+
+test('when not matching format', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'with': /\d+/ };
+  element.val('abc');
+  equal(clientSideValidations.validators.local.format(element, options), "failed validation");
+});
+
+test('when allowing blank', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'with': /\d+/, 'allow_blank': true };
+  equal(clientSideValidations.validators.local.format(element, options), undefined);
+});
+
+test('when not allowing blank', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'with': /\d+/ };
+  equal(clientSideValidations.validators.local.format(element, options), "failed validation");
+});

data/test/javascript/public/test/validators/inclusion.js

@@ -0,0 +1,42 @@
+module('Inclusion options');
+
+test('when value is in the list', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'in': [1, 2, 3] };
+  element.val('1');
+  equal(clientSideValidations.validators.local.inclusion(element, options), undefined);
+});
+
+test('when value is in the range', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'range': [1, 3] };
+  element.val('1');
+  equal(clientSideValidations.validators.local.inclusion(element, options), undefined);
+});
+
+test('when value is not in the list', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'in': [1, 2, 3] };
+  element.val('4');
+  equal(clientSideValidations.validators.local.inclusion(element, options), "failed validation");
+});
+
+test('when value is not in the range', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'range': [1, 3] };
+  element.val('4');
+  equal(clientSideValidations.validators.local.inclusion(element, options), "failed validation");
+});
+
+test('when allowing blank', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'in': [1, 2, 3], allow_blank: true };
+  equal(clientSideValidations.validators.local.inclusion(element, options), undefined);
+});
+
+test('when not allowing blank', function() {
+  var element = $('<input type="text" />');
+  var options = { 'message': "failed validation", 'in': [1, 2, 3] };
+  equal(clientSideValidations.validators.local.inclusion(element, options), "failed validation");
+});
+

data/test/javascript/public/test/validators/length.js

@@ -0,0 +1,76 @@
+module('Length options');
+
+test('when allowed length is 3 and value length is 3', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { is: "failed validation" }, is: 3 };
+  element.val('123');
+  equal(clientSideValidations.validators.local.length(element, options), undefined);
+});
+
+test('when allowed length is 3 and value length is 4', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { is: "failed validation" }, is: 3 };
+  element.val('1234');
+  equal(clientSideValidations.validators.local.length(element, options), "failed validation");
+});
+
+test('when allowed length is 3 and value length is 2', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { is: "failed validation" }, is: 3 };
+  element.val('12');
+  equal(clientSideValidations.validators.local.length(element, options), "failed validation");
+});
+
+test('when allowing blank and allowed length is 3', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { is: "failed validation" }, is: 3, allow_blank: true };
+  equal(clientSideValidations.validators.local.length(element, options), undefined);
+});
+
+test('when allowing blank and minimum length is 3 and maximum length is 100', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { minimum: "failed minimum validation", maximum: "failed maximum validation" }, minimum: 3, maximum: 100, allow_blank: true };
+  equal(clientSideValidations.validators.local.length(element, options), undefined);
+});
+
+test('when not allowing blank and allowed length is 3', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { is: "failed validation" }, is: 3 };
+  equal(clientSideValidations.validators.local.length(element, options), "failed validation");
+});
+
+test('when allowed length is 3 and a differnet tokenizer', function() {
+  var element = $('<input type="text" />');
+  element.val("one two three");
+  var options = { messages: { is: "failed validation" }, is: 3, js_tokenizer: "match(/\\w+/g)" };
+  equal(clientSideValidations.validators.local.length(element, options), undefined);
+});
+
+test('when allowed length minimum is 3 and value length is 3', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { is: "failed validation" }, is: 3 };
+  element.val('123');
+  equal(clientSideValidations.validators.local.length(element, options), undefined);
+});
+
+test('when allowed length minimum is 3 and value length is 2', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { minimum: "failed validation" }, minimum: 3 };
+  element.val('12');
+  equal(clientSideValidations.validators.local.length(element, options), "failed validation");
+});
+
+test('when allowed length maximum is 3 and value length is 3', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { is: "failed validation" }, is: 3 };
+  element.val('123');
+  equal(clientSideValidations.validators.local.length(element, options), undefined);
+});
+
+test('when allowed length maximum is 3 and value length is 4', function() {
+  var element = $('<input type="text" />');
+  var options = { messages: { maximum: "failed validation" }, maximum: 3 };
+  element.val('1234');
+  equal(clientSideValidations.validators.local.length(element, options), "failed validation");
+});
+