Skip to content

Update formValidator.js #1

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 1 commit into from
Jan 16, 2017
Merged

Update formValidator.js #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
201 changes: 91 additions & 110 deletions src/js/formValidator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@

//---------------------Form New Ticket---------------------------

var warning_font_color = '#761c19';
var warning_class = '';
var form = {
// TODO: Implement Validation for : 'select'
// TODO: Simplify the "TextArea" Validation.
validate: function (form) {

var parent_form = document.getElementById(form);
var st_form_inputs = parent_form.getElementsByTagName('input');
var st_form_labels = parent_form.getElementsByTagName('label');
var form_el = document.getElementById(form);
var st_form_inputs = form_el.getElementsByTagName('input');
var st_form_textArea = form_el.getElementsByTagName('textarea');
var st_form_select = form_el.getElementsByTagName('select');
var st_form_labels = form_el.getElementsByTagName('label');

console.log(st_form_inputs);
// ----------------------------------RESET ERRORS----------------------------------------------
// Remove all Alter Elements.
var elements = document.getElementsByClassName('alert_message');
while (elements[0]) {
elements[0].parentNode.removeChild(elements[0]);
}
// ----------------------------------VALIDATE AND POPULATE-------------------------------------
// **********************************VALIDATE AND POPULATE******************************************

// ----------------------------------GENERAL VALIDATION [Input]-------------------------------------

// Start Searching Elements for Validation.
for (var i = 0; i < st_form_inputs.length; i++) {
if (st_form_inputs[i].required == true) {
Expand Down Expand Up @@ -92,131 +99,88 @@ var form = {

}
}
// -------------------------------------------------------------------------------------------
return result;
}
};

var helper = {
// To Convert First Char to Uppercase.
toUCFirst: function (text) {
if (text && text.length > 0) {
text = text.toString();
return text.charAt(0).toUpperCase() + text.slice(1);
}
return text;
},
// To Validate Email.
validateEmail: function (email) {
// Convert to Native String Format.
email = email.toString();
// To Check it as String or Not.
if (!email) return false;
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
// Valid Email.
return true;
}
// In-Valid Email.
return false;
},
setFontColor: function (code) {
if (code.indexOf('#') == -1) {
code = '#' + code;
}
warning_font_color = code.toString();
//---------------------Form New Ticket---------------------------
var warning_font_color = '#761c19';
var warning_class = '';
var form = {
validate: function (form) {
// ---------------------MANUAL VALIDATION [TextArea]---------------------------------------

var st_form_inputs = document.getElementById(form).getElementsByTagName('input');
var st_form_labels = document.getElementById(form).getElementsByTagName('label');

// ----------------------------------RESET ERRORS----------------------------------------------
// Remove all Alter Elements.
var elements = document.getElementsByClassName('alert_message');
while (elements[0]) {
elements[0].parentNode.removeChild(elements[0]);
}
// ----------------------------------VALIDATE AND POPULATE-------------------------------------
// Start Searching Elements for Validation.
for (var i = 0; i < st_form_inputs.length; i++) {
if (st_form_inputs[i].required == true) {
for (var i = 0; i < st_form_textArea.length; i++) {
if (st_form_textArea[i].required == true) {

// Finding Label to Populate Response.
for (var ia = 0; ia < st_form_labels.length; ia++) {
// Label should match with its 'For' property.
if (st_form_labels[ia].htmlFor == st_form_inputs[i].name) {
if (st_form_labels[ia].htmlFor == st_form_textArea[i].name) {
var targetLabel = st_form_labels[ia];
}
}

// Initial Dummy Response.
var response = '';
var result = true;
var error_hit = false;

if (targetLabel == undefined) continue;

var label_core = targetLabel.outerHTML;
var label_core = targetLabel.innerHTML;
var field_name = targetLabel.htmlFor;

var field_value = st_form_inputs[i].value;
var field_type = st_form_inputs[i].type;
var field_value = st_form_textArea[i].value;
var field_type = st_form_textArea[i].type;


// Basic Field Empty Validation.
if (field_value == '') {
response = label_core + '<span style="color: ' + warning_font_color + '; font-weight: 400;" class="alert_message ' + warning_class + '">'

response = label_core + ' <span style="color: ' + warning_font_color + '; font-weight: 400" class="alert_message ' + warning_class + '">'
+ helper.toUCFirst(field_name)
+ ' is Required</span>';
error_hit = true;
} else if (field_type == 'select') {
if (field_value == '0') {
response = 'This Field is Required';
error_hit = true;
}
}

// Validate with Min Value Restriction.
var min = st_form_inputs[i].min;
if (min && !error_hit) {
if (field_value.length < min && field_value.length != 0) {
response = label_core + '<span style="color: ' + warning_font_color + '; font-weight: 400" class="alert_message ' + warning_class + '">'
+ helper.toUCFirst(field_name)
+ ' should greater than ' + min + '.</span>';
error_hit = true;
}
}
// Validate with Max Value Restriction.
var max = st_form_inputs[i].max;
if (max && !error_hit) {
if (field_value.length > max && field_value.length != 0) {
response = label_core + '<span style="color: ' + warning_font_color + '; font-weight: 400" class="alert_message ' + warning_class + '">'
+ helper.toUCFirst(field_name)
+ ' should less than ' + max + '.</span>';
error_hit = true;

// If there is no 'Response', then re-init default value.
if (response == '' || response.length == 0) {
response = label_core;
} else {
if (result == true) {
result = false;
}
}
//Validate with Email Restriction.
if (st_form_inputs[i].type == 'email' && !error_hit) {
if (!helper.validateEmail(field_value) && field_value.length != 0) {
response = label_core + ' <span style="color: ' + warning_font_color + '; font-weight: 400" class="alert_message ' + warning_class + '">'
+ ' Invalid Email Format.</span>';
error_hit = true;

// Updating Response to Label.
targetLabel.innerHTML = response;
}
}

// ---------------------MANUAL VALIDATION [Select]---------------------------------------
for (var i = 0; i < st_form_select.length; i++) {
if (st_form_select[i].required == true) {

// Finding Label to Populate Response.
for (var ia = 0; ia < st_form_labels.length; ia++) {
// Label should match with its 'For' property.
if (st_form_labels[ia].htmlFor == st_form_select[i].name) {
var targetLabel = st_form_labels[ia];
}
}

// Password Match Validation.
if (st_form_inputs[i].getAttribute('match') !== null && !error_hit) {
var match_field = st_form_inputs[i].getAttribute('match');
var first_element = document.getElementsByName(match_field);
if (first_element[0].value == '') {
error_hit = true;
response = label_core + '<span style="color: ' + warning_font_color + '; font-weight: 400;" class="alert_message ' + warning_class + '">Password should not be empty</span>';
} else if (first_element[0].value !== st_form_inputs[i].value) {
response = label_core + '<span style="color: ' + warning_font_color + '; font-weight: 400;" class="alert_message ' + warning_class + '">Password doesn\'t match. </span>';
error_hit = true;
// Initial Dummy Response.
var response = '';
var result = true;

var label_core = targetLabel.innerHTML;
var field_name = targetLabel.htmlFor;

var field_value = st_form_select[i].value;
var field_type = st_form_select[i].type;


// Basic Field Empty Validation.
if (field_value == 0) {

response = label_core + ' <span style="color: ' + warning_font_color + '; font-weight: 400" class="alert_message ' + warning_class + '">'
+ 'Choose valid Option </span>';
} else if (field_type == 'select') {
if (field_value == '0') {
response = 'Choose valid option';
}
}

Expand All @@ -232,10 +196,11 @@ var form = {

// Updating Response to Label.
targetLabel.innerHTML = response;

}
}
// -------------------------------------------------------------------------------------------

// ------------------------------------------------------------------------------------

return result;
}
};
Expand All @@ -248,6 +213,14 @@ var helper = {
return text.charAt(0).toUpperCase() + text.slice(1);
}
return text;
var data = {
form: 'new_ticket_form',
warning_color: 'aa0000',
new_class: 'test'
};

// Default Form Init.
validate(data);
},
// To Validate Email.
validateEmail: function (email) {
Expand Down Expand Up @@ -301,20 +274,28 @@ function validate(data) {
event.preventDefault();
}
});

//TODO: Implement Self Field Validation.
} else if (st_form_inputs[i].type == 'text') {
st_form_inputs[i].addEventListener('change', function (event) {
if (!initValidation(data.form)) {
event.preventDefault();
}
});
}
//TODO: Implement Self Field Validation.
//else if (st_form_inputs[i].type == 'text') {
// st_form_inputs[i].addEventListener('change', function (event) {
// if (!initValidation(data.form)) {
// event.preventDefault();
// }
// });
//}
}
}

// Trigger the Validation process.
function initValidation(activeForm) {
return form.validate(activeForm);
}


var data = {
form: 'new_ticket_form',
warning_color: 'aa0000',
new_class: 'test'
};

// Default Form Init.
validate(data);