好的,我知道每个人的第一个想法是简单地创建另一个验证方法和消息.但这是交易.我们有一个表单,其中包含一个用作雇主姓名和公司名称的字段,具体取决于下拉列表中选择的内容.
我需要做的是当下拉列表显示他们拥有公司并且他们没有填写该字段然后它显示一条消息.如果他们不拥有公司并且它是空的,那么它会显示另一条消息.
我怎么做到这一点？这是使用最新版本的jQuery和Validate插件(http://jqueryvalidation.org/).
更新：
在选择下面的选定答案后,我向您展示了我最终得到的代码……
谢谢,享受！
代码详细信息：
/**
* 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,EmployerPhone: {
//required: true,phoneUS: true
},BenefitSource: {
//required: 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,DirectDeposit: 'required',EmploymentLength: 'required',ActiveMilitary: 'required',RoutingNumber: {
required: true,digits: true,rangelength: [9,9]
},AccountNumber: {
required: 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',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',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',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');
}
}
}
}();
解决方法
使用
the
.rules('add') method动态更改选择更改时的消息.然后使用
the .valid() method在字段上触发新测试,以便立即更新消息.
$(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();
});
});
