Skip to content

Improved scroll feature #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shankarThiyagaraajan merged 2 commits into from
Jul 21, 2017
Merged

Improved scroll feature #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03c395f
- Element navigation scroll | Under Testing.
shankarThiyagaraajan Jul 21, 2017
03f6d3c
- Error element scroll | Fixed.
Jul 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/demo/index3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,12 +110,14 @@
form: 'clientAdd',
forceFilter: true,
onChange: true,
errorClass: '__error_cap',
message: {
required: 'This field is required !',
min: 'This field is less then the limit [INDEX]',
max: 'This field is exceeds the limit of [INDEX]',
password: 'Password doesn\'t match !',
email: 'Invalid Email found !'
required: 'This field is required.',
min: 'This field length is too low.',
max: 'This field length is exceeds the limit.',
password: 'Password does not match.',
email: 'Email is not valid.',
file: 'This file is not allowed.'
}
});

Expand Down
75 changes: 51 additions & 24 deletions src/js/formValidator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* Released under the MIT license
* https://github.com/global-source/javascript_form_validator/blob/master/LICENSE
*
* Date: 2017-05-01
* Date: 2017-07-21
*/

/*
Expand Down Expand Up @@ -59,6 +59,8 @@ var jsValidator = {
this.onlyFilter = option.onlyFilter;
// To Enable/Disable global validator.
this.onChange = option.onChange;
// Update default response "class".
if ('undefined' === typeof option.errorClass) option.errorClass = 'js-error-cop';
// Update "jsSettings" to global object.
this.jsSettings = jsSettings.init(option);
// Update "jsForm" to global object.
Expand Down Expand Up @@ -139,6 +141,7 @@ var jsValidator = {
}
if (false == this.initialLoad) validationResponse.init(errorList, this.option);
this.initialLoad = false;
helper.scrollToError();
return status;
},
/*
Expand Down Expand Up @@ -221,7 +224,7 @@ var jsFilter = {
checkStatus: function (elem) {
var status;
status = true;
if (false === this.forceFilter) {
if (false === jsValidator.forceFilter) {
status = false;
if (true === elem.required) {
status = true;
Expand Down Expand Up @@ -296,8 +299,8 @@ var jsFilter = {
var min = event.target.min;
var max = event.target.max;
// Default values for Min and Max.
if (!min) min = 0;
if (!max) max = 54;
if (!min) min = 1;
if (!max) max = 31;
// Forming pattern for Restriction.
var regex = new RegExp('^[0-9]+$');
// Validation with Code.
Expand All @@ -309,7 +312,7 @@ var jsFilter = {
event.preventDefault();
}

var num = +this.value, max = 31, min = 1; //converts value to a Number
var num = +this.value; //converts value to a Number
if (!this.value.length) return false; //allows empty field
this.value = isNaN(num) ? min : num > max ? max : num < min ? min : num;

Expand Down Expand Up @@ -535,9 +538,9 @@ var jsRuleSets = {
'id': activeElem.name + '_new1_1_1xv_resp'
});
firstErrorHit = activeElem.name + '_new1_1_1xv_resp';
helper.scrollToItem('#' + firstErrorHit);
} // To Check the Value is less than min or not.
}

// To Check the Value is less than minimum or not.
if (activeElem.min) {
if (jsRuleSets.isSet(activeElem)) {
if (!jsRuleSets.min(activeElem)) {
Expand All @@ -547,12 +550,12 @@ var jsRuleSets = {
'id': activeElem.name + '_new1_1_1xv_resp'
});
firstErrorHit = activeElem.name + '_new1_1_1xv_resp';
helper.scrollToItem('#' + firstErrorHit);
validElem = false;
}
}
} // To Check the Value is grater than max or not.
}

// To Check the Value is grater than max or not.
if (activeElem.max) {
if (jsRuleSets.isSet(activeElem)) {
if (!jsRuleSets.max(activeElem)) {
Expand All @@ -562,12 +565,12 @@ var jsRuleSets = {
'id': activeElem.name + '_new1_1_1xv_resp'
});
firstErrorHit = activeElem.name + '_new1_1_1xv_resp';
helper.scrollToItem('#' + firstErrorHit);
validElem = false;
}
}
} // To Check the Entered E-mail is Valid or Not.
}

// To Check the Entered E-mail is Valid or Not.
if (activeElem.type == 'email') {
if (jsRuleSets.isSet(activeElem)) {
if (!jsRuleSets.email(activeElem)) {
Expand All @@ -577,13 +580,13 @@ var jsRuleSets = {
'id': activeElem.name + '_new1_1_1xv_resp'
});
firstErrorHit = activeElem.name + '_new1_1_1xv_resp';
helper.scrollToItem('#' + firstErrorHit);
validElem = false;
}
}
} // To Compare the Password is Same or Not with Re-Password.
// TODO: Implement Simplified Comparison.
}

// To Compare the Password is Same or Not with Re-Password.
// TODO: Implement Simplified Comparison.
if (activeElem.type == 'password') {
if (jsRuleSets.isSet(activeElem)) {
if (!jsRuleSets.compare(activeElem)) {
Expand All @@ -593,7 +596,6 @@ var jsRuleSets = {
'id': activeElem.name + '_new1_1_1xv_resp'
});
firstErrorHit = activeElem.name + '_new1_1_1xv_resp';
helper.scrollToItem('#' + firstErrorHit);
validElem = false;
}
}
Expand Down Expand Up @@ -812,12 +814,27 @@ var helper = {
// Finally return "false" for general keys.
return false;
},
/*
* To Scroll Up / Down to notify the item that have validation message.
*/
scrollToError: function () {
var active_class = validationResponse.getClass();
if (0 === document.getElementsByClassName(active_class).length) return false;
document.getElementsByClassName(active_class)[0].setAttribute('id', '__header_error_target_temp');
var id = '#' + document.getElementsByClassName(active_class)[0].id;
window.location.href = id;
document.getElementsByClassName(active_class)[0].removeAttribute('id');
// Remove the navigated value.
this.removeHash(id);
},
/*
* To Scroll Up / Down to notify the item that have validation message.
*/
scrollToItem: function (item) {
// Form hash value.
var hash = '#' + item;
var hash = item;
// If "#" is missing, then add back to the ID.
if (-1 === hash.indexOf('#')) hash = '#' + hash;
// Navigate with the hash value.
window.location.href = hash;
// Remove the navigated value.
Expand All @@ -832,7 +849,7 @@ var helper = {
// Replacing the URL with specific hash value.
path = path.replace(hash, '');
// Update to url history.
window.history.pushState('', 'Title', path)
window.history.pushState('', 'Title', path);
}
};
/**
Expand Down Expand Up @@ -877,16 +894,20 @@ var pattern = {
* To Manage all kind of error response.
*/
var validationResponse = {
active_class: false,
/*
* Initiating the Response handler.
*/
init: function (errorList, option) {
this.errorMessage = option.message;
// Updating the class.
this.active_class = option.errorClass;
// var errorElements = option.errorElem;
// jsLogger.out('Errors', errorList);
this.input(errorList.input);
this.select(errorList.select);
this.textArea(errorList.textArea);

},
/*
* To handle the "input" element.
Expand All @@ -900,6 +921,9 @@ var validationResponse = {
select: function (elem) {
this.process(elem);
},
getClass: function () {
return this.active_class;
},
/*
* To handle the "textArea" element.
*/
Expand All @@ -911,6 +935,7 @@ var validationResponse = {
*/
process: function (elem) {
var elementDefaultResponse = '';
var active_class = this.getClass();
for (var i in elem) {
// jsLogger.out('Element', document.getElementById(elem[i].id));
if (elem[i].el && true === elem[i].el.required) {
Expand All @@ -926,6 +951,7 @@ var validationResponse = {
// jsLogger.out('Element Found', false);
spanTag = document.createElement('span');
spanTag.setAttribute('id', activeElem.id);
spanTag.setAttribute('class', active_class);
spanTag.innerHTML = elementDefaultResponse;
} else {
// Re-use Existing response Message SPAN.
Expand Down Expand Up @@ -974,16 +1000,17 @@ var validationResponse = {
* then it will be replaces.
*/
default: function (errorType) {
var active_class = this.getClass();
var errorMessages = {
required: 'This field is required',
min: 'This field length is too low.',
max: 'This field length is exceeds the limit',
password: 'Password does not match.',
email: 'Email is not valid',
file: 'This file is not allowed'
required: '<span class="' + active_class + '">This field is required.</span>',
min: '<span class="' + active_class + '">This field length is too low.</span>',
max: '<span class="' + active_class + '">This field length is exceeds the limit.</span>',
password: '<span class="' + active_class + '">Password does not match.</span>',
email: '<span class="' + active_class + '">Email is not valid.</span>',
file: '<span class="' + active_class + '">This file is not allowed.</span>'
};
if (typeof errorType !== 'string') return false;
if (typeof errorMessages[errorType] === 'undefined') return false;
return errorMessages[errorType];
}
};
};
Loading