Bootstrap formvalidation.io essayant d'exiger un champ ou l'autre
J'ai récemment acheté et j'utilise Bootstrap FormValidation à partir de http://formvalidation.io/ et en utilisant l'exemple sur http://formvalidation.io/examples/requiring-at-least-one-field/ J'essaie de configurer mon compte pour le besoin d'un email ou d'un numéro de téléphone, mais je ne parviens pas à faire fonctionner l'exemple. Peu importe ce que je fais, un message d'erreur indiquant "Vous devez entrer au moins une méthode de contact" s'affiche uniquement dans le champ Email principal.
Si le code complet est utile, je peux poster mais voici les extraits de code pertinents.
<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>
Section de validation du 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',
message: 'The value is not valid %s phone number'
}
}
},
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;
}
}
}
}
}
});
Dans l'exemple, la ligne $fields = validator.getFieldElements('cm'); a cm remplacée par email, mais elle semblait être autre chose qu'une étiquette arbitraire. Mais cela peut être plus qu'une étiquette qui correspond à la ligne validator.updateStatus('cm', validator.STATUS_VALID, 'callback');. _ {cm a été changé en contact
Toutes les autres validations semblent fonctionner sur la page.
METTRE À JOUR:
si je vends $fields sur la console juste après $fields = validator.getFieldElements('cm');, je reçois "input=([name="primaryEmail"])". J'aurais pensé que cela aurait été un objet avec à la fois primaireEmail et cPhone.
UPDATE 5-18-15 D'abord le code HTML, puis les scripts. J'ai rendu les choses encore plus difficiles en ajoutant une option thrid dans le mix, mais l'utilisation peut utiliser un téléphone portable, un téléphone professionnel ou un email principal comme méthode de contact.
<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>
J'ai essayé plusieurs scripts:
Voici celui qui ressemble le plus à l'exemple de http://formvalidation.io/examples/requiring-at-least-one-field/
$('#leadForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
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'
},
stringLength: {
min: 2,
max: 30,
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, validator, $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,validator,'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', validator.STATUS_VALID, '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);
}
}
});
});
Celui-ci ressemble plus à ce que @ Béranger avait suggéré. En fait, cela se rapproche beaucoup, mais comme il y en a beaucoup sur le keyup, cela ne se déclenche pas en cliquant sur le bouton Soumettre. J'ai essayé d'ajouter.
$('#leadForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
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'
},
phone: {
country: 'country',
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', false, 'notEmpty').revalidateField('cPhone');
// fv.enableFieldValidators('wPhone', false, '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),
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);
}
});
});
Vous pouvez désactiver la deuxième validation et l'activer uniquement lorsque la première est fausse:
jetez un oeil à ce lien
<form id="profileForm" method="post">
<p>Please provide one of these information:</p>
<div class="form-group">
<label class="control-label">Social Security Number</label>
<input type="text" class="form-control" name="ssn" />
</div>
<div class="form-group text-center">— Or —</div>
<div class="form-group">
<label class="control-label">Driver's License Number</label>
<input type="text" class="form-control" name="driverLicense" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
ssn: {
validators: {
notEmpty: {
message: 'Please provide the Social Security number'
},
regexp: {
regexp: /^(?!(000|666|9))\d{3}(?!00)\d{2}(?!0000)\d{4}$/,
message: 'The format of your SSN is invalid. It should be XXXXXXXXX with no dashes'
}
}
},
driverLicense: {
// Disable validators
enabled: false,
validators: {
notEmpty: {
message: 'Or the Drivers License number'
},
stringLength: {
min: 8,
max: 20,
message: 'The Drivers License number must be more than 8 and less than 20 characters long'
}
}
}
}
})
.on('keyup', '[name="ssn"], [name="driverLicense"]', function(e) {
var driverLicense = $('#profileForm').find('[name="driverLicense"]').val(),
ssn = $('#profileForm').find('[name="ssn"]').val(),
fv = $('#profileForm').data('formValidation');
switch ($(this).attr('name')) {
// User is focusing the ssn field
case 'ssn':
fv.enableFieldValidators('driverLicense', ssn === '').revalidateField('driverLicense');
if (ssn && fv.getOptions('ssn', null, 'enabled') === false) {
fv.enableFieldValidators('ssn', true).revalidateField('ssn');
} else if (ssn === '' && driverLicense !== '') {
fv.enableFieldValidators('ssn', false).revalidateField('ssn');
}
break;
// User is focusing the drivers license field
case 'driverLicense':
if (driverLicense === '') {
fv.enableFieldValidators('ssn', true).revalidateField('ssn');
} else if (ssn === '') {
fv.enableFieldValidators('ssn', false).revalidateField('ssn');
}
if (driverLicense && ssn === '' && fv.getOptions('driverLicense', null, 'enabled') === false) {
fv.enableFieldValidators('driverLicense', true).revalidateField('driverLicense');
}
break;
default:
break;
}
});
});
</script>
La lecture de la documentation de getFieldElements n’est pas une étiquette arbitraire. C'est le nom de l'élément que vous souhaitez sélectionner. Il retourne un jQuery [], alors je suppose que sous le capot, il ne fait qu'une sélection d'attribut similaire à $( "input[name*='elementname']" );. Je me base sur le fait que, dans leur exemple, les deux champs contiennent "email" et que c'est le nom qu'ils sélectionnent. Certes, cela n’explique pas pourquoi «cm» a quelque chose de retourné, mais il se peut qu’ils fassent une autre magie.
Je suspecterais que si vous changiez les noms de vos champs de contact en quelque chose comme 'phoneContact' et '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>
Et puis changé le nom de votre champ en "contact", vous devriez voir les deux champs.
//...
$fields = validator.getFieldElements('contact');
//..
validator.updateStatus('contact', validator.STATUS_VALID, 'callback');
Puisque vous utilisez différents types de champs, vous ne pouvez pas grouper la validation à l'aide des mêmes validateurs pour tous les champs de saisie, comme ils le faisaient dans l'exemple. La création d'un validateur personnalisé pour chaque champ à l'aide de callback, puis la mise à jour de tous les champs pour valider lorsque l'entrée est détectée a fonctionné pour moi. Voir la partie de code javascript ...
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
primaryEmail: {
validators: {
callback: {
message: 'You must enter atleast one field ',
callback: function(value, validator, $field) {
if ($("input[name=primaryEmail]").val()) {
// Update the status of callback validator for all fields
validator.updateStatus('primaryEmail', validator.STATUS_VALID, 'callback');
validator.updateStatus('cPhone', validator.STATUS_VALID, 'callback');
return true;
}
return false;
}
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
},//primaryEmail
cPhone : {
validators : {
callback: {
message: 'You must enter atleast one field',
callback: function(value, validator, $field) {
if ($("input[name=cPhone]").val()) {
// Update the status of callback validator for all fields
validator.updateStatus('primaryEmail', validator.STATUS_VALID, 'callback');
validator.updateStatus('cPhone', validator.STATUS_VALID, 'callback');
return true;
}
return false;
}
},
stringLength: {
min: 8,
message: "Please enter a contact number with 8 digits"
}
}
}//cPhone
}//fields
});
$('#profileForm').formValidation().on("success.form.bv", function (e) {
e.preventDefault();
alert('success');
$('.form-group').addClass("hidden");
});
});
</script>
Après avoir inspecté le code, j’ai constaté qu’il manquait le Attribute.
Voici le code HTML valide
<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" data-fv-field="contact" />
</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" data-fv-field="contact" />
</div>
Il vous manquait l'attribut data-fv-field
Je ne suis pas sûr, mais je pense que le "courrier électronique" dans getFieldElements n'est pas arbitraire, mais qu'il s'agit en fait du nom du champ "groupe" (juste après le fields: {) . Est-ce cm?
Pouvez-vous publier l'intégralité du <script>?
Comme @Sen k l'a dit dans sa réponse:
Puisque vous utilisez différents types de champs, vous ne pouvez pas grouper la validation en utilisant les mêmes validateurs pour tous les champs de saisie ...
Une solution simple, vous pouvez utiliser l'événement success.field.fv comme décrit dans le code suivant:
$('#YourFormId').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
primaryEmail: {
validators: {
notEmpty: {},
emailAddress: {
message: 'The value is not a valid email address'
}
}
},
cPhone: {
validators: {
notEmpty: {},
phone: {
country: 'country',
message: 'The value is not valid %s phone number'
}
}
}
}
})
.on('success.field.fv', function(e, data) {
var primaryEmail = $('[name="primaryEmail"]'),
cPhone = $('[name="cPhone"]'),
validator = data.fv;
if (data.field === "primaryEmail" && cPhone.val() === '') {
// mark the cPhone field as valid if it's empty & the
// primaryEmail field was valid.
validator.updateStatus('cPhone', validator.STATUS_VALID, null);
}
if (data.field === "cPhone" && primaryEmail.val() === '') {
// mark the primaryEmail field as valid if it's empty & the
// cPhone field was valid.
validator.updateStatus('primaryEmail', validator.STATUS_VALID, null);
}
});
REMARQUE:
J'ai utilisé le validateur
notEmpty, car les validateursemailAdressetphonemarquent le champ vide comme valide.