jquery - validate - validacion con bootstrap 4
Bootstrap formvalidation.io tratando de requerir un campo u otro (6)
Como @Sen k dijo en su respuesta:
Ya que está usando diferentes tipos de campo, no puede agrupar la validación usando los mismos validadores para todos los campos de entrada ...
Una solución simple, puede usar el evento success.field.fv como se describe en el siguiente código:
$(''#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);
}
});
NOTA:
Utilicé el validador
notEmpty, porqueemailAdressyphonevalidadores dephonemarcan el campo vacío como válido.
Recientemente he comprado y estoy usando Bootstrap FormValidation de http://formvalidation.io/ y utilizando el ejemplo en http://formvalidation.io/examples/requiring-at-least-one-field/ Estoy tratando de configurar mi para la solicitud, ya sea un correo electrónico o un número de teléfono, pero no puedo obtener el ejemplo para que funcione correctamente. No importa lo que haga, veo un mensaje de error que dice "Debe ingresar al menos un método de contacto" solo en el campo Correo electrónico principal.
Si el código COMPLETO sería útil, puedo publicar, pero aquí están los fragmentos de código relevantes.
<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>
Sección de validación del 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;
}
}
}
}
}
});
En el ejemplo, la línea $fields = validator.getFieldElements(''cm''); ha reemplazado a cm con el correo electrónico, pero parecía ser otra cosa que una etiqueta arbitraria. Pero quizás sea más que una etiqueta que coincida con el validator.updateStatus(''cm'', validator.STATUS_VALID, ''callback''); línea. cm ha sido cambiado a contacto
Todas las demás validaciones parecen estar funcionando en la página.
ACTUALIZAR:
si vuelco $fields a la consola justo después de $fields = validator.getFieldElements(''cm''); Obtengo "input=([name="primaryEmail"])" Pensé que habría sido un objeto con primaryEmail y cPhone.
ACTUALIZAR 5-18-15 primero el HTML y luego los scripts. He hecho las cosas aún más difíciles al agregar una opción tridimensional a la mezcla, pero el uso puede usar un teléfono celular, un teléfono del trabajo o un correo electrónico primario como método de contacto. Se requiere uno.
<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>
He intentado varios guiones:
Aquí está el que más se parece al ejemplo en 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);
}
}
});
});
Este se parece mucho más a lo que @Béranger había sugerido. En realidad, se acerca mucho, pero dado que gran parte de la misma no se activa con el clic del botón de envío. He intentado añadir.
$(''#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);
}
});
});
Después de inspeccionar el código, descubrí que le faltaba el atributo .
Aquí está el HTML válido
<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>
Te faltaba el campo Datos- atributo - atributos
Leer la documentación de getFieldElements no es una etiqueta arbitraria. Es el nombre del elemento que desea seleccionar. Devuelve un jQuery [], así que supongo que debajo del capó está haciendo una selección de atributo similar a $( "input[name*=''elementname'']" ); Me baso en el hecho de que en su ejemplo, ambos campos contienen "correo electrónico" y ese es el nombre que están seleccionando. Por supuesto, eso no explica por qué ''cm'' ha devuelto algo, pero pueden estar haciendo alguna otra magia.
Sospecho que si cambia los nombres de los campos de contacto a algo como ''phoneContact'' y ''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>
Y luego cambió su nombre de campo a ''contacto'', debería ver ambos campos.
//...
$fields = validator.getFieldElements(''contact'');
//..
validator.updateStatus(''contact'', validator.STATUS_VALID, ''callback'');
No estoy seguro, pero creo que el "correo electrónico" en getFieldElements no es arbitrario, pero de hecho es el nombre del campo "grupo" (justo después de los fields: { ). ¿Cuál es el nombre de su grupo de campo? Es cm ?
¿Puedes publicar todo el <script> ?
Puede deshabilitar la segunda validación y habilitarla solo cuando la primera sea incorrecta:
Echa un vistazo a este enlace.
<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>
Ya que está usando diferentes tipos de campo, no puede agrupar la validación usando los mismos validadores para todos los campos de entrada como lo hicieron en el ejemplo. Crear un validador personalizado para cada campo usando la devolución de llamada y luego actualizar todos los campos para que sean válidos cuando se detecte que la entrada funcionó para mí. Ver javascript parte del código ...
<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>