我最近购买并使用Bootstrap FormValidation从
http://formvalidation.io/和使用示例在
http://formvalidation.io/examples/requiring-at-least-one-field/我试图设置我的需要EITHER电子邮件或电话号码,但我不能得到的例子正常工作。无论我做什么,我只能在主电子邮件字段下看到一条错误消息“您必须至少输入一个联系方法”。
如果FULL代码将有所帮助,我可以发布,但这里是相关的代码段。
<div class="form-group"> <label class="control-label" for="primaryEmail">Primary Email</label> <input type="text" class="form-control contactMethod" id="primaryEmail" name="primaryEmail" value="" placeholder="Enter email"> </div> <div class="form-group"> <label class="control-label" for="cPhone">Cell Phone</label> <input type="text" class="form-control contactMethod" id="cPhone" name="cPhone" value="" placeholder="Enter cell phone"> </div>
javascript的验证部分
$('#form').formValidation({ framework: 'bootstrap',icon: { valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh' },fields: { cPhone: { validators: { phone: { country: 'country',message: 'The value is not valid %s phone number' } } },primaryEmail: { validators: { emailAddress: { message: 'The value is not a valid email address' } } },secondaryEmail: { validators: { emailAddress: { message: 'The value is not a valid email address' } } },wPhone: { validators: { phone: { country: 'country',contact : { selector: '.contactMethod',validators: { callback: { message: 'You must enter at least one contact method',callback: function(value,validator,$field) { var isEmpty = true,// Get the list of fields $fields = validator.getFieldElements('contact'); console.log($fields); for (var i = 0; i < $fields.length; i++) { if ($fields.eq(i).val() !== '') { isEmpty = false; break; } } if (!isEmpty) { // Update the status of callback validator for all fields validator.updateStatus('contact',validator.STATUS_VALID,'callback'); return true; } return false; } } } } } });
在例子中行$ fields = validator.getFieldElements(‘cm’);有cm替换为电子邮件,但它似乎只是一个任意标签。但它可能不是一个匹配validator.updateStatus(‘cm’,validator.STATUS_VALID,’callback’)的标签;线。 cm已更改为接触
所有其他验证似乎都在页面上工作。
更新:
如果我把$ fields转储到控制台$ fields = validator.getFieldElements(‘cm’);我得到“input =([name =”primaryEmail“])”我本来以为它会是一个对象与primaryEmail和cPhone。
更新5-18-15
首先是HTML,然后是脚本。我通过添加一个thrid选项到混合,但使用可以使用手机,工作电话或主电子邮件作为联系方法一个需要更困难的事情。
<div class="form-group"> <label class="control-label" for="primaryEmail">Primary Email <i class="fa fa-asterisk text-warning"></i></label> <input type="text" class="form-control contactMethod" id="primaryEmail" name="primaryEmail" value="" placeholder="Enter email" data-fv-field="contactMethod"> </div> <div class="form-group"> <label class="control-label phoneMask" for="cPhone">Cell Phone <i class="fa fa-asterisk text-warning"></i></label> <input type="text" class="form-control contactMethod" id="cPhone" name="cPhone" value="" placeholder="Enter cell phone" data-fv-field="contactMethod"> </div> <div class="form-group"> <label class="control-label phoneMask" for="wPhone">Work Phone <i class="fa fa-asterisk text-warning"></i></label> <input type="text" class="form-control contactMethod" id="wPhone" name="wPhone" value="" placeholder="Enter work phone" data-fv-field="contactMethod"> </div>
我试过几个脚本:
这是最接近http://formvalidation.io/examples/requiring-at-least-one-field/上的例子的那个
$('#leadForm').formValidation({ framework: 'bootstrap',icon: { valid: 'glyphicon glyphicon-ok',validating: 'glyphicon glyphicon-refresh' },fields: { fName: { validators: { notEmpty: { message: 'The first name is required' },stringLength: { min: 2,max: 30,message: 'The first name must be more than 2 and less than 30 characters long' } } },lName: { validators: { notEmpty: { message: 'The last name is required' },message: 'The last name must be more than 2 and less than 30 characters long' } } },secondaryEmail: { validators: { emailAddress: { message: 'The value is not a valid email address' } } },contactMethod: { selector: '.contactMethod',validators: { callback: function(value,$field) { var isEmpty = true,isValid = false,returnIsValid = false,// Get the list of fields $fields = validator.getFieldElements('contactMethod'),fv = $('#leadForm').data('formValidation'); for (var i = 0; i < $fields.length; i++) { thisField = $fields[i].id; // trim value of field thisVal = jQuery.trim($('#'+thisField).val()); if(thisVal.length == 0){ console.log('empty '+thisField); fv.updateStatus(thisField,'INVALID','callback').updateMessage(thisField,'test'); } else { if(thisField == 'cPhone' || thisField == 'wPhone'){ console.log('validating '+thisField); } else if(thisField == 'primaryEmail'){ console.log('validating '+thisField); } } if ($fields.eq(i).val() !== '') { isEmpty = false; break; } } if (!isEmpty) { // Update the status of callback validator for all fields validator.updateStatus('contactMethod','callback'); returnIsValid = false; } else { } return returnIsValid; } } } } }).on('success.form.fv',function(e) { e.preventDefault(); var $form = $(e.target),fv = $form.data('formValidation'); // console.log($form.serialize()); // console.log(fv); $.ajax({ type: 'post',url: 'api/add.jsp?surveyId='+cfg['lead.surveyID'],data: $form.serialize(),dataType: 'json',async: false,success: function(result){ console.log(result); } } }); });
这更像是@Béranger建议的。它实际上非常接近,但由于这么多的是在keyup它不是触发的提交按钮的点击。我试过添加。
$('#leadForm').formValidation({ framework: 'bootstrap',fields: { primaryEmail: { validators: { notEmpty: { message: 'You must include at least one contact method' },emailAddress: { message: 'The value is not a valid email address' } } },cPhone: { validators: { notEmpty: { message: 'You must include at least one contact method' },phone: { country: 'country',message: 'The value is not valid %s phone number' } } },wPhone: { validators: { notEmpty: { message: 'You must include at least one contact method' },message: 'The value is not valid %s phone number' } } } } }) .on('keyup','[name="primaryEmail"],[name="cPhone"],[name="wPhone"]',function(e) { var cPhoneIsEmpty = jQuery.trim($('#leadForm').find('[name="cPhone"]').val()) === '',wPhoneIsEmpty = jQuery.trim($('#leadForm').find('[name="wPhone"]').val()) === '',primaryEmailIsEmpty = jQuery.trim($('#leadForm').find('[name="primaryEmail"]').val()) === '',fv = $('#leadForm').data('formValidation'); var cPhoneIsValid = fv.isValidField('cPhone') === true ? true : false; var wPhoneIsValid = fv.isValidField('wPhone') === true ? true : false; var primaryEmailIsValid = fv.isValidField('primaryEmail') === true ? true : false; switch ($(this).attr('name')) { // User is focusing the primaryEmail field case 'primaryEmail': fv.enableFieldValidators('cPhone',primaryEmailIsEmpty).revalidateField('cPhone'); fv.enableFieldValidators('wPhone',primaryEmailIsEmpty).revalidateField('wPhone'); break; // User is focusing the cPhone field case 'cPhone': fv.enableFieldValidators('primaryEmail',cPhoneIsEmpty).revalidateField('primaryEmail'); fv.enableFieldValidators('wPhone',cPhoneIsEmpty).revalidateField('wPhone'); break; // User is focusing the cPhone field case 'wPhone': fv.enableFieldValidators('primaryEmail',wPhoneIsEmpty).revalidateField('primaryEmail'); fv.enableFieldValidators('cPhone',wPhoneIsEmpty).revalidateField('cPhone'); break; default: break; } // if( (cPhoneIsValid || wPhoneIsValid || primaryEmailIsValid)){ // fv.enableFieldValidators('primaryEmail',false,'notEmpty').revalidateField('primaryEmail'); // fv.enableFieldValidators('cPhone','notEmpty').revalidateField('cPhone'); // fv.enableFieldValidators('wPhone','notEmpty').revalidateField('cPhone'); // } else { // fv.enableFieldValidators('primaryEmail',true).revalidateField('primaryEmail'); // fv.enableFieldValidators('cPhone',true).revalidateField('cPhone'); // fv.enableFieldValidators('wPhone',true).revalidateField('cPhone'); // } // fv.enableFieldValidators('primaryEmail',true); // fv.enableFieldValidators('cPhone',true); // fv.enableFieldValidators('wPhone',true); }).on('success.form.fv',function(e) { e.preventDefault(); // console.log('submit here'); var $form = $(e.target),success: function(result){ console.log(result); } }); });
解决方法
阅读
getFieldElements的文档它不是一个任意的标签。它是您要选择的元素的名称。它返回一个jQuery []所以我猜在底下它只是做一个属性选择类似$(“input [name * =’elementname’]”);我基于这样的事实,在他们的示例中,两个字段都包含“电子邮件”,这是他们选择的名称。没有解释为什么’cm’有任何返回,但他们可能正在做一些其他的魔法。
我怀疑,如果你将联系人字段的名称更改为类似“phoneContact”和“emailContact”
<div class="form-group"> <label class="control-label" for="emailContact">Primary Email</label> <input type="text" class="form-control contactMethod" id="primaryEmail" name="emailContact" value="" placeholder="Enter email"> </div> <div class="form-group"> <label class="control-label" for="phoneContact">Cell Phone</label> <input type="text" class="form-control contactMethod" id="cPhone" name="phoneContact" value="" placeholder="Enter cell phone"> </div>
然后将您的字段名称更改为“联系人”,您应该会看到这两个字段。
//... $fields = validator.getFieldElements('contact'); //.. validator.updateStatus('contact','callback');