Ok, I know that the first thought here for everyone is to simply create another validation method and message. But here is the deal. We have a form that has a field that is used as Employer Name and Company Name, dependent on what is selected in a dropdown.
What I need to be able to do is when the dropdown shows that they own the company and they didn't fill out the field then it shows one message. If they don't own the company and it is empty then it shows another message.
How would I accomplish this? This is using the latest version of jQuery and the Validate plugin (/).
UPDATE: I present to you the code that I ended up with after the selected answer below was selected...
Thanks and enjoy!
Code In Detail:
/**
* Reference:
*/
$(document).ready(function() {
var rules = {
IncomeSource: 'required',
NetIncome: {
required: true,
usDollar: true,
minDollars: 1
},
//Begin - Fields that don't always show
JobTitle: {
//required: true,
nameInput: true
},
Employer: {
//required: true,
nameInput: true
},
EmployerPhone: {
//required: true,
phoneUS: true
},
BenefitSource: {
//required: true,
nameInput: true
},
//SemiMonthlySpecifics: 'required', //Select one when Semi-Monthly or Monthly are selected
//End - Fields that don't always show
PayFrequency: 'required',
LastPayDate: {
required: true,
pastDate: true,
date: true
},
NextPayDate: {
required: true,
futureDate: true,
date: true
},
DirectDeposit: 'required',
EmploymentLength: 'required',
ActiveMilitary: 'required',
RoutingNumber: {
required: true,
digits: true,
rangelength: [9, 9]
},
AccountNumber: {
required: true,
digits: true,
rangelength: [4, 17]
},
AccountType: 'required'
};
//And field specific (and even validation type specific) error messages
var messages = {
IncomeSource: ss.i18n._t('IncomeSourceRequiredError'),
NetIncome: {
required: ss.i18n._t('NetIncomeRequiredError')
},
//Begin - Fields that don't always show
JobTitle: {
required: ss.i18n._t('JobTitleRequiredError')
},
Employer: {
required: ss.i18n._t('EmployerRequiredError')
},
EmployerPhone: {
required: ss.i18n._t('EmployerPhoneRequiredError')
},
BenefitSource: {
required: ss.i18n._t('BenefitSourceRequiredError')
},
SemiMonthlySpecifics: ss.i18n._t('SemiMonthlySpecificsRequiredError'), //Select one when Semi-Monthly or Monthly are selected
//End - Fields that don't always show
PayFrequency: ss.i18n._t('PayFrequencyRequiredError'),
LastPayDate: {
required: ss.i18n._t('LastPayDateRequiredError')
},
NextPayDate: {
required: ss.i18n._t('NextPayDateRequiredError')
},
DirectDeposit: ss.i18n._t('DirectDepositRequiredError'),
EmploymentLength: ss.i18n._t('EmploymentLengthRequiredError'),
ActiveMilitary: ss.i18n._t('ActiveMilitaryRequiredError'),
RoutingNumber: {
required: ss.i18n._t('RoutingNumberRequiredError')
},
AccountNumber: {
required: ss.i18n._t('AccountNumberRequiredError')
},
AccountType: ss.i18n._t('AccountTypeRequiredError')
};
$('#applicationForm').validate({
//debug: true,
rules: rules,
messages: messages,
errorElement: 'span',
ignore: '.ignore',
onfocusout: function( element, event ) {
$(element).valid();
},
invalidHandler: function(event, validator) {
kclHelpers.openErrorModal(event, validator);
},
errorPlacement: function(error, element) {
var insertLocation = kclHelpers.getInsertLocation(element);
error.appendTo( insertLocation );
},
success: function(label, element) {
element = $(element);
var insertLocation = kclHelpers.getInsertLocation(element);
insertLocation.hide();
kclHelpers.parentShowSuccess(element, '.control-group');
},
//Had to use this for show/hide of errors because error placement doesn't get called on every error.
showErrors: function(errorMap, errorList) {
if (this.numberOfInvalids() > 0) {
//We want to make sure that we show/hide things appropriately on error
$.each(errorList, function(index, item) {
var domElement = item['element'];
var message = item['message'];
var element = $(domElement);
var insertLocation = kclHelpers.getInsertLocation(element);
insertLocation.show();
kclHelpers.parentShowError(element, '.control-group');
});
}
this.defaultShowErrors();
}
});
$('[rel=tooltip]').tooltip();
// When the income source is changed, change the form respectively
$('#IncomeSource').on('change', kclFinancialInfo.incomeSourceChanged);
$('#PayFrequency').on('change', kclFinancialInfo.payFrequencyChanged);
});
/**
* This is where we specify functions only for this form
*/
var kclFinancialInfo = function()
{
return {
incomeSourceChanged: function() {
// Store and convert the income source to lowercase
var val = $(this).val().toLocaleLowerCase();
// Switch on the income source
switch (val) {
// Case for 'benefits'
case 'benefits':
// Do not display the employment section
kclFinancialInfo.toggleEmploymentSection(false);
// Display the benefit source section
kclFinancialInfo.toggleBenefitSource(true);
break;
// Case for 'selfemployment'
case 'selfemployment':
// Display the benefit source section
kclFinancialInfo.toggleBenefitSource(false);
// Display the employment section
kclFinancialInfo.toggleEmploymentSection(true, "Please enter your company's name");
// Call to update the labels for the employment section based on income source of 'selfemployment'
kclFinancialInfo.updateEmploymentSectionLabels('selfemployment');
// Hide the employer phone field
kclFinancialInfo.toggleEmployerPhone(true);
break;
// Case for 'job' and default
case 'job':
default:
// Do not display the benefit source
kclFinancialInfo.toggleBenefitSource(false);
// Display the employment section
kclFinancialInfo.toggleEmploymentSection(true, "Please enter your employer's name");
// Call to update the labels for the employment section based on income source of 'job'
kclFinancialInfo.updateEmploymentSectionLabels('job');
// Do not hide the employer phone field
kclFinancialInfo.toggleEmployerPhone(false);
break;
}
},
payFrequencyChanged: function() {
var val = $(this).val().toLocaleLowerCase();
switch (val) {
case 'semi_monthly':
// Display the Specific SemiMonthly section
kclFinancialInfo.toggleSpecificSemiMonthly(true, val);
case 'monthly':
// Display the Specific SemiMonthly section BUT change the labels
kclFinancialInfo.toggleSpecificSemiMonthly(true, val);
break;
default:
// Do not display the Specific SemiMonthly section
kclFinancialInfo.toggleSpecificSemiMonthly(false);
break;
}
},
toggleSpecificSemiMonthly: function(show, value) {
if (show) {
if (value == 'semimonthly') {
$('#specifics-label-for-SemiMonthlySpecifics_day').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SEMI_MONTHLY_SPECIFICS_DAY'));
$('#specifics-label-for-SemiMonthlySpecifics_date').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SEMI_MONTHLY_SPECIFICS_DATE'));
}
else {
$('#specifics-label-for-SemiMonthlySpecifics_day').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.MONTHLY_SPECIFICS_DAY'));
$('#specifics-label-for-SemiMonthlySpecifics_date').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.MONTHLY_SPECIFICS_DATE'));
}
$('#semi-monthly-specifics').show().removeClass('hidden');
$('input[name="SemiMonthlySpecifics"]').rules('add', 'required');
}
else {
kclHelpers.hideMessage('SemiMonthlySpecifics');
$('#semi-monthly-specifics').hide().addClass('hidden');
$('input[name="SemiMonthlySpecifics"]').rules('remove', 'required');
}
},
toggleEmployerPhone: function(hide) {
// If you want to hide the employer phone field
if (hide) {
// Hide the employer phone
$('#employer_phone').hide().addClass('hidden');
$('employer_phone').rules('remove', 'required');
}
// Else (you don't want to hide the employer phone field)
else {
// Display the employer phone field
$('#employer_phone').show().removeClass('hidden');
$('employer_phone').rules('add', 'required');
}
},
toggleBenefitSource: function(show) {
// If you want to show the benefit sources section
if (show) {
// Show the benefit source section
$('#benefit_source').show().removeClass('hidden');
// Since the benefit source section is now visible, make it required
$('#BenefitSource').rules('add', 'required');
/**
* Hide the WorkPhone validation message if its displayed (it remains on the screen if the user
* selects benefits)
*/
kclHelpers.hideMessage('WorkPhone');
}
// Else (you don't want to show the benefit source section, display the default employment section)
else {
// Hide the benefit source section
$('#benefit_source').hide().addClass('hidden');
// Since the benefit source is now hidden, it is no longer required
$('#BenefitSource').rules('remove', 'required');
}
},
toggleEmploymentSection: function(show, employerMessage = '') {
// If you want to show the employment section
if (show) {
// Show the employment section
$('#employment_section').show();
$('#JobTitle').rules('add', 'required');
$('#Employer').rules('add', {
required: true,
messages: {
required: employerMessage
}
});
$('#EmployerPhone').rules('add', 'required');
}
// Else (you don't want to show the employment section)
else {
// Hide the employment section
$('#employment_section').hide();
$('#JobTitle').rules('remove', 'required');
$('#Employer').rules('remove', 'required');
$('#EmployerPhone').rules('remove', 'required');
}
},
updateEmploymentSectionLabels: function(source) {
// Switch on the income source (now lowercase)
switch (source.toLocaleLowerCase()) {
// Case for 'job'
case 'job':
/**
* Make sure the job title and employer labels are correct (this is needed in case the labels
* need to be changed back to default
*/
$('#JobTitle_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.JOB_TITLE'));
$('#Employer_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.EMPLOYER'));
$('#Employer').attr('placeholder', 'Enter Employer Name');
break;
// Case for 'selfemployment'
case 'selfemployment':
// Change the employer label to correspond to self employment (Employer -> Your Company Name)
$('#Employer_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SELF_EMPLOYER'));
$('#Employer').attr('placeholder', 'Enter Company Name');
break;
}
}
}
}();
var kclHelpers = function()
{
var firstErrorID = '';
var errorCount = 0;
return {
//Expects jQuery element
getInsertLocation: function(element) {
var fieldName = element.attr('name');
if (fieldName == 'Reference_1[Relationship]') {
fieldName = 'Reference_1-Relationship';
}
else if (fieldName == 'Reference_2[Relationship]') {
fieldName = 'Reference_2-Relationship';
}
var insertTo = "#" + fieldName + "-error";
return $(insertTo);
},
//Expects jQuery element and a selector string
parentShowError: function(element, parentSelector) {
var parentElem = element.parents(parentSelector);
if (!parentElem.hasClass('has-error')) {
parentElem.addClass('has-error');
}
parentElem.removeClass('has-success');
},
//Expects jQuery element and a selector string
parentShowSuccess: function(element, parentSelector) {
var parentElem = element.parents(parentSelector);
if (!parentElem.hasClass('has-success')) {
parentElem.addClass('has-success');
}
parentElem.removeClass('has-error');
},
hideMessage: function(fieldName) {
if (fieldName == 'CreatePassword') {
// Clear the Create-Password error message as well as the Confirm-Password error message
$('#ConfirmPassword-error').hide();
}
if (fieldName == 'CellPhone') {
// Clear the Cell-Phone error message as well as the Home-Phone error message
$('#HomePhone-error').hide();
}
/**
* Find the id in the form styling file corresponding to field we wish to "clear"
* And set its "display" value to "none", effectively deleting it
* This is for the desktop version
*/
$("#" + fieldName + "-error").hide();
},
openErrorModal: function(event, validator) {
var errorCnt = validator.numberOfInvalids();
var errors = '';
var hasSetErrorID = false;
kclHelpers.errorCount = errorCnt;
if (errorCnt) {
var message = "";
for (var i in validator.errorMap) {
if (!hasSetErrorID) {
hasSetErrorID = true;
kclHelpers.firstErrorID = i;
}
var str = i;
var label = '';
if (i == 'AgreeTerms') {
label = 'Website terms';
}
else if (i == 'ContactTerms') {
label = 'Contact terms';
}
else if (i == 'HomePhone') {
label = 'Home Phone';
}
else if (i == 'RoutingNumber') {
label = 'Routing Number';
}
else if (i == 'AccountNumber') {
label = 'Account Number';
}
else if (i == 'SemiMonthlySpecifics') {
label = 'Pay Frequency Specifics';
}
else if (/Reference_1/i.test(str)) {
label = 'Reference 1 ' + $("label[for='" + i + "']").text();
}
else if (/Reference_2/i.test(str)) {
label = 'Reference 2 ' + $("label[for='" + i + "']").text();
}
else {
label = $("label[for='" + i + "']").text();
}
errors += '<li>' + label + ': ' + validator.errorMap[i] + '</li>';
}
message += '<ol>' + errors + '</ol>';
$('#form-error-modal .modal-body .error-count').text(errorCnt);
$('#form-error-modal ul.error-list').html(message);
$('#form-error-modal').modal('show');
}
}
}
}();
Ok, I know that the first thought here for everyone is to simply create another validation method and message. But here is the deal. We have a form that has a field that is used as Employer Name and Company Name, dependent on what is selected in a dropdown.
What I need to be able to do is when the dropdown shows that they own the company and they didn't fill out the field then it shows one message. If they don't own the company and it is empty then it shows another message.
How would I accomplish this? This is using the latest version of jQuery and the Validate plugin (http://jqueryvalidation.org/).
UPDATE: I present to you the code that I ended up with after the selected answer below was selected...
http://pastebin.com/iG3Z4BbJ
Thanks and enjoy!
Code In Detail:
/**
* Reference: http://jqueryvalidation.org/rules
*/
$(document).ready(function() {
var rules = {
IncomeSource: 'required',
NetIncome: {
required: true,
usDollar: true,
minDollars: 1
},
//Begin - Fields that don't always show
JobTitle: {
//required: true,
nameInput: true
},
Employer: {
//required: true,
nameInput: true
},
EmployerPhone: {
//required: true,
phoneUS: true
},
BenefitSource: {
//required: true,
nameInput: true
},
//SemiMonthlySpecifics: 'required', //Select one when Semi-Monthly or Monthly are selected
//End - Fields that don't always show
PayFrequency: 'required',
LastPayDate: {
required: true,
pastDate: true,
date: true
},
NextPayDate: {
required: true,
futureDate: true,
date: true
},
DirectDeposit: 'required',
EmploymentLength: 'required',
ActiveMilitary: 'required',
RoutingNumber: {
required: true,
digits: true,
rangelength: [9, 9]
},
AccountNumber: {
required: true,
digits: true,
rangelength: [4, 17]
},
AccountType: 'required'
};
//And field specific (and even validation type specific) error messages
var messages = {
IncomeSource: ss.i18n._t('IncomeSourceRequiredError'),
NetIncome: {
required: ss.i18n._t('NetIncomeRequiredError')
},
//Begin - Fields that don't always show
JobTitle: {
required: ss.i18n._t('JobTitleRequiredError')
},
Employer: {
required: ss.i18n._t('EmployerRequiredError')
},
EmployerPhone: {
required: ss.i18n._t('EmployerPhoneRequiredError')
},
BenefitSource: {
required: ss.i18n._t('BenefitSourceRequiredError')
},
SemiMonthlySpecifics: ss.i18n._t('SemiMonthlySpecificsRequiredError'), //Select one when Semi-Monthly or Monthly are selected
//End - Fields that don't always show
PayFrequency: ss.i18n._t('PayFrequencyRequiredError'),
LastPayDate: {
required: ss.i18n._t('LastPayDateRequiredError')
},
NextPayDate: {
required: ss.i18n._t('NextPayDateRequiredError')
},
DirectDeposit: ss.i18n._t('DirectDepositRequiredError'),
EmploymentLength: ss.i18n._t('EmploymentLengthRequiredError'),
ActiveMilitary: ss.i18n._t('ActiveMilitaryRequiredError'),
RoutingNumber: {
required: ss.i18n._t('RoutingNumberRequiredError')
},
AccountNumber: {
required: ss.i18n._t('AccountNumberRequiredError')
},
AccountType: ss.i18n._t('AccountTypeRequiredError')
};
$('#applicationForm').validate({
//debug: true,
rules: rules,
messages: messages,
errorElement: 'span',
ignore: '.ignore',
onfocusout: function( element, event ) {
$(element).valid();
},
invalidHandler: function(event, validator) {
kclHelpers.openErrorModal(event, validator);
},
errorPlacement: function(error, element) {
var insertLocation = kclHelpers.getInsertLocation(element);
error.appendTo( insertLocation );
},
success: function(label, element) {
element = $(element);
var insertLocation = kclHelpers.getInsertLocation(element);
insertLocation.hide();
kclHelpers.parentShowSuccess(element, '.control-group');
},
//Had to use this for show/hide of errors because error placement doesn't get called on every error.
showErrors: function(errorMap, errorList) {
if (this.numberOfInvalids() > 0) {
//We want to make sure that we show/hide things appropriately on error
$.each(errorList, function(index, item) {
var domElement = item['element'];
var message = item['message'];
var element = $(domElement);
var insertLocation = kclHelpers.getInsertLocation(element);
insertLocation.show();
kclHelpers.parentShowError(element, '.control-group');
});
}
this.defaultShowErrors();
}
});
$('[rel=tooltip]').tooltip();
// When the income source is changed, change the form respectively
$('#IncomeSource').on('change', kclFinancialInfo.incomeSourceChanged);
$('#PayFrequency').on('change', kclFinancialInfo.payFrequencyChanged);
});
/**
* This is where we specify functions only for this form
*/
var kclFinancialInfo = function()
{
return {
incomeSourceChanged: function() {
// Store and convert the income source to lowercase
var val = $(this).val().toLocaleLowerCase();
// Switch on the income source
switch (val) {
// Case for 'benefits'
case 'benefits':
// Do not display the employment section
kclFinancialInfo.toggleEmploymentSection(false);
// Display the benefit source section
kclFinancialInfo.toggleBenefitSource(true);
break;
// Case for 'selfemployment'
case 'selfemployment':
// Display the benefit source section
kclFinancialInfo.toggleBenefitSource(false);
// Display the employment section
kclFinancialInfo.toggleEmploymentSection(true, "Please enter your company's name");
// Call to update the labels for the employment section based on income source of 'selfemployment'
kclFinancialInfo.updateEmploymentSectionLabels('selfemployment');
// Hide the employer phone field
kclFinancialInfo.toggleEmployerPhone(true);
break;
// Case for 'job' and default
case 'job':
default:
// Do not display the benefit source
kclFinancialInfo.toggleBenefitSource(false);
// Display the employment section
kclFinancialInfo.toggleEmploymentSection(true, "Please enter your employer's name");
// Call to update the labels for the employment section based on income source of 'job'
kclFinancialInfo.updateEmploymentSectionLabels('job');
// Do not hide the employer phone field
kclFinancialInfo.toggleEmployerPhone(false);
break;
}
},
payFrequencyChanged: function() {
var val = $(this).val().toLocaleLowerCase();
switch (val) {
case 'semi_monthly':
// Display the Specific SemiMonthly section
kclFinancialInfo.toggleSpecificSemiMonthly(true, val);
case 'monthly':
// Display the Specific SemiMonthly section BUT change the labels
kclFinancialInfo.toggleSpecificSemiMonthly(true, val);
break;
default:
// Do not display the Specific SemiMonthly section
kclFinancialInfo.toggleSpecificSemiMonthly(false);
break;
}
},
toggleSpecificSemiMonthly: function(show, value) {
if (show) {
if (value == 'semimonthly') {
$('#specifics-label-for-SemiMonthlySpecifics_day').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SEMI_MONTHLY_SPECIFICS_DAY'));
$('#specifics-label-for-SemiMonthlySpecifics_date').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SEMI_MONTHLY_SPECIFICS_DATE'));
}
else {
$('#specifics-label-for-SemiMonthlySpecifics_day').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.MONTHLY_SPECIFICS_DAY'));
$('#specifics-label-for-SemiMonthlySpecifics_date').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.MONTHLY_SPECIFICS_DATE'));
}
$('#semi-monthly-specifics').show().removeClass('hidden');
$('input[name="SemiMonthlySpecifics"]').rules('add', 'required');
}
else {
kclHelpers.hideMessage('SemiMonthlySpecifics');
$('#semi-monthly-specifics').hide().addClass('hidden');
$('input[name="SemiMonthlySpecifics"]').rules('remove', 'required');
}
},
toggleEmployerPhone: function(hide) {
// If you want to hide the employer phone field
if (hide) {
// Hide the employer phone
$('#employer_phone').hide().addClass('hidden');
$('employer_phone').rules('remove', 'required');
}
// Else (you don't want to hide the employer phone field)
else {
// Display the employer phone field
$('#employer_phone').show().removeClass('hidden');
$('employer_phone').rules('add', 'required');
}
},
toggleBenefitSource: function(show) {
// If you want to show the benefit sources section
if (show) {
// Show the benefit source section
$('#benefit_source').show().removeClass('hidden');
// Since the benefit source section is now visible, make it required
$('#BenefitSource').rules('add', 'required');
/**
* Hide the WorkPhone validation message if its displayed (it remains on the screen if the user
* selects benefits)
*/
kclHelpers.hideMessage('WorkPhone');
}
// Else (you don't want to show the benefit source section, display the default employment section)
else {
// Hide the benefit source section
$('#benefit_source').hide().addClass('hidden');
// Since the benefit source is now hidden, it is no longer required
$('#BenefitSource').rules('remove', 'required');
}
},
toggleEmploymentSection: function(show, employerMessage = '') {
// If you want to show the employment section
if (show) {
// Show the employment section
$('#employment_section').show();
$('#JobTitle').rules('add', 'required');
$('#Employer').rules('add', {
required: true,
messages: {
required: employerMessage
}
});
$('#EmployerPhone').rules('add', 'required');
}
// Else (you don't want to show the employment section)
else {
// Hide the employment section
$('#employment_section').hide();
$('#JobTitle').rules('remove', 'required');
$('#Employer').rules('remove', 'required');
$('#EmployerPhone').rules('remove', 'required');
}
},
updateEmploymentSectionLabels: function(source) {
// Switch on the income source (now lowercase)
switch (source.toLocaleLowerCase()) {
// Case for 'job'
case 'job':
/**
* Make sure the job title and employer labels are correct (this is needed in case the labels
* need to be changed back to default
*/
$('#JobTitle_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.JOB_TITLE'));
$('#Employer_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.EMPLOYER'));
$('#Employer').attr('placeholder', 'Enter Employer Name');
break;
// Case for 'selfemployment'
case 'selfemployment':
// Change the employer label to correspond to self employment (Employer -> Your Company Name)
$('#Employer_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SELF_EMPLOYER'));
$('#Employer').attr('placeholder', 'Enter Company Name');
break;
}
}
}
}();
var kclHelpers = function()
{
var firstErrorID = '';
var errorCount = 0;
return {
//Expects jQuery element
getInsertLocation: function(element) {
var fieldName = element.attr('name');
if (fieldName == 'Reference_1[Relationship]') {
fieldName = 'Reference_1-Relationship';
}
else if (fieldName == 'Reference_2[Relationship]') {
fieldName = 'Reference_2-Relationship';
}
var insertTo = "#" + fieldName + "-error";
return $(insertTo);
},
//Expects jQuery element and a selector string
parentShowError: function(element, parentSelector) {
var parentElem = element.parents(parentSelector);
if (!parentElem.hasClass('has-error')) {
parentElem.addClass('has-error');
}
parentElem.removeClass('has-success');
},
//Expects jQuery element and a selector string
parentShowSuccess: function(element, parentSelector) {
var parentElem = element.parents(parentSelector);
if (!parentElem.hasClass('has-success')) {
parentElem.addClass('has-success');
}
parentElem.removeClass('has-error');
},
hideMessage: function(fieldName) {
if (fieldName == 'CreatePassword') {
// Clear the Create-Password error message as well as the Confirm-Password error message
$('#ConfirmPassword-error').hide();
}
if (fieldName == 'CellPhone') {
// Clear the Cell-Phone error message as well as the Home-Phone error message
$('#HomePhone-error').hide();
}
/**
* Find the id in the form styling file corresponding to field we wish to "clear"
* And set its "display" value to "none", effectively deleting it
* This is for the desktop version
*/
$("#" + fieldName + "-error").hide();
},
openErrorModal: function(event, validator) {
var errorCnt = validator.numberOfInvalids();
var errors = '';
var hasSetErrorID = false;
kclHelpers.errorCount = errorCnt;
if (errorCnt) {
var message = "";
for (var i in validator.errorMap) {
if (!hasSetErrorID) {
hasSetErrorID = true;
kclHelpers.firstErrorID = i;
}
var str = i;
var label = '';
if (i == 'AgreeTerms') {
label = 'Website terms';
}
else if (i == 'ContactTerms') {
label = 'Contact terms';
}
else if (i == 'HomePhone') {
label = 'Home Phone';
}
else if (i == 'RoutingNumber') {
label = 'Routing Number';
}
else if (i == 'AccountNumber') {
label = 'Account Number';
}
else if (i == 'SemiMonthlySpecifics') {
label = 'Pay Frequency Specifics';
}
else if (/Reference_1/i.test(str)) {
label = 'Reference 1 ' + $("label[for='" + i + "']").text();
}
else if (/Reference_2/i.test(str)) {
label = 'Reference 2 ' + $("label[for='" + i + "']").text();
}
else {
label = $("label[for='" + i + "']").text();
}
errors += '<li>' + label + ': ' + validator.errorMap[i] + '</li>';
}
message += '<ol>' + errors + '</ol>';
$('#form-error-modal .modal-body .error-count').text(errorCnt);
$('#form-error-modal ul.error-list').html(message);
$('#form-error-modal').modal('show');
}
}
}
}();
- 1 "Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist" – Sparky Commented Jan 5, 2014 at 0:44
- I apologize for not dropping code on the page to prove that I can rock it out. But I would like to point out the fact that I can take what was given to me below and mix it in with my already complex code kinda makes your argument a moot point. I do understand the desire to fight the lazy noob. That is something I am not. I understand the plugin well enough to preface the question correctly in concept and to implement it locally. But for display's sake I will edit my question to throw down my code gauntlet for you. – Patrick Commented Jan 6, 2014 at 19:22
- It's not my plugin, it's not my site, and that's not my rule. The purpose of showing your code is not to prove anything... it's for making this a higher quality Q & A website. (It also makes customized answers possible) Please see item #2 and #3 here: stackoverflow.com/help/on-topic ~ Without trying to antagonize you any further, in the vein of making this a higher quality site, the code itself should also be displayed in the OP... links go stale. It's all about helping others in addition to the original poster. Thanks for understanding. – Sparky Commented Jan 6, 2014 at 20:36
- Ok, I got the code added to the question as well. – Patrick Commented Jan 6, 2014 at 20:39
- I edited out your "appeasement" comment (defensive attitude is not necessary), up-voted, and voted to re-open. – Sparky Commented Jan 6, 2014 at 22:54
2 Answers
Reset to default 16Here's a much cleaner (and probably the correct) way
messages: {
RoutingNumber: {
required:"Message1",
digits: "Message2",
rangelength: "Message 3"
}
}
For more validation methods: List of built in validation methods
Use the .rules('add') method to dynamically change the message on change of the select. Then use the .valid() method to trigger a new test on the field in order to instantly update the message.
$(document).ready(function () {
$('#myform').validate({
rules: {
type: {
required: true
},
theName: {
required: true
}
}
});
$('select[name="type"]').on('change', function () {
var theMessage,
theType = $(this).val();
if (theType == 'employer') {
theMessage = "Required Message 1";
} else if (theType == 'company') {
theMessage = "Required Message 2";
} else {
theMessage = "This field is required.";
}
// dynamically change the message
$('input[name="theName"]').rules('add', {
messages: {
required: theMessage
}
});
// trigger immediate validation to update message
$('input[name="theName"]').valid();
});
});
Working DEMO: http://jsfiddle.net/CLFY9/