Skip to content

Commit

Permalink
Merge pull request #105 from legalthings/required_fields_should_show_…
Browse files Browse the repository at this point in the history 
…red_when_continue_to_step

Fix marking invalid fields as red. Restore using validator.update() method
  • Loading branch information
@svenstm
svenstm committed May 2, 2018
2 parents 5a1fd17 + d04e962 commit ff00df0
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 18 deletions.
63 changes: 54 additions & 9 deletions js/legalform-validation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@

this.initBootstrapValidation();
this.initOnStep();
this.initOnDone();
}

/**
Expand Down Expand Up @@ -110,7 +111,7 @@
}

/**
* Initialize the bootstrap vaidation for the forms
* Initialize the bootstrap validation for the forms
*/
this.initBootstrapValidation = function () {
$(this.elWizard).find('form').validator();
Expand All @@ -120,7 +121,7 @@
* Update the bootstrap vaidation for the forms
*/
this.updateBootstrapValidation = function () {
$(this.elWizard).find('form').validator('validate');
$(this.elWizard).find('form').validator('update');
}

/**
Expand All @@ -130,25 +131,39 @@
var ractive = this.ractive;
var self = this;

$(this.elWizard).on('step.bs.wizard done.bs.wizard', '', $.proxy(function(e) {
$(this.elWizard).on('step.bs.wizard', '', $.proxy(function(e) {
if (e.direction === 'back' || ractive.get('validation_enabled') === false) return;

var validator = $(self.el).find('.wizard-step.active form').data('bs.validator');
var $stepForm = $(self.el).find('.wizard-step.active form');
var validator = $stepForm.data('bs.validator');
validator.validate();

$(self.el).find(':not(.selectize-input)>:input:not(.btn)').each(function() {
$stepForm.find(':not(.selectize-input)>:input:not(.btn)').each(function() {
self.validateField(this);
$(this).change();
});

if (validator.isIncomplete() || validator.hasErrors()) {
e.preventDefault();
return;
}
}));
};

if (e.type === 'done') {
$(self.el).trigger('done.completed');
}
/**
* Initialize validation on done event
*/
this.initOnDone = function() {
var ractive = this.ractive;
var self = this;

$(this.elWizard).on('done.bs.wizard', '', $.proxy(function(e) {
if (ractive.get('validation_enabled') === false) return;

var valid = validateAllSteps(self);

valid ?
$(self.el).trigger('done.completed') :
e.preventDefault();
}));
};

Expand Down Expand Up @@ -192,6 +207,7 @@
if (!name) return;

var value = $(input).val();

if (value.length === 0) {
$(input).get(0).setCustomValidity(
$(input).attr('required') ? 'Field is required' : ''
Expand Down Expand Up @@ -299,6 +315,35 @@

return {meta: meta, name: name};
}

//Validate all steps on done event
function validateAllSteps(validation) {
var toIndex = null;
var elWizard = validation.elWizard;

$(elWizard).find('.wizard-step form').each(function(key, step) {
var validator = $(this).data('bs.validator');
validator.validate();

$(this).find(':not(.selectize-input)>:input:not(.btn)').each(function() {
validation.validateField(this);
$(this).change();
});

var invalid = validator.isIncomplete() || validator.hasErrors();
if (invalid) {
toIndex = key;
return false;
}
});

if (toIndex === null) return true;

$(elWizard).wizard(toIndex + 1);
$('.form-scrollable').perfectScrollbar('update');

return false;
}
}

window.LegalFormValidation = LegalFormValidation;
Expand Down
25 changes: 16 additions & 9 deletions js/ractive-legalform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@
onChangeCondition: function(newValue, oldValue, keypath) {
var name = unescapeDots(keypath.replace(this.suffix.conditions, ''));
var input = '#doc-wizard [name="' + name + '"]';
var $input = $(input);

if (!newValue && oldValue !== undefined) {
var set = getByKeyPath(this.defaults, name, undefined);
Expand All @@ -168,12 +169,12 @@
this.initAmountField(name, meta);
}
} else {
var rebuild = $(input).is('select') && !$(input).hasClass('selectized');
var rebuild = $input.is('select') && !$input.hasClass('selectized');
if (rebuild) this.initSelectize(input);
}

var validator = $('.wizard-step.active form').data('bs.validator');
if (validator) validator.validate();
var validator = $input.closest('.wizard-step form').data('bs.validator');
if (validator) validator.update();
},

/**
Expand Down Expand Up @@ -500,22 +501,28 @@
initWizardJumpBySteps: function () {
var ractive = this;

$(this.elWizard).on('click', '.wizard-step > h3', function(e, index) {
$(this.elWizard).on('click', '.wizard-step > h3', function(e) {
e.preventDefault();
var index = $(ractive.el).find('.wizard-step').index($(this).parent());

var $toStep = $(this).closest('.wizard-step');
var index = $(ractive.el).find('.wizard-step').index($toStep);

$(ractive.el).find('.wizard-step form').each(function(key, step) {
var validator = $(this).data('bs.validator');
if (key >= index) return false;

var $stepForm = $(this);
var validator = $stepForm.data('bs.validator');
validator.validate();

$(this).find(':not(.selectize-input)>:input:not(.btn)').each(function() {
$stepForm.find(':not(.selectize-input)>:input:not(.btn)').each(function() {
ractive.validation.validateField(this);
$(this).change();
});

if ((validator.isIncomplete() || validator.hasErrors()) && index > key) {
var invalid = (validator.isIncomplete() || validator.hasErrors()) && index > key;
if (invalid) {
index = key;
return;
return false;
}
});

Expand Down

0 comments on commit ff00df0

Please sign in to comment.