What happens is the following I have a form for registration and what I want is that what is registered comes out a sweetAlert
. The problem is that when pressing the button the alert comes out so the form is not validated. I would like to know how I can make the alert only show if the form is fully validated. I use formValidation.io
to validate my form. I leave the validation code:
$().ready(function () {
$('#formularioRegistro').formValidation({// Validación datos capa cliente. TENER PRESENTE EL ID DEL FORM
err: {container: 'tooltip'}, //muestra en tooltips
icon: {valid: 'fa fa-thumbs-up', invalid: 'fa fa-thumbs-down', validating: 'fa fa-refresh'}, //iconos
//locale: 'es_ES', //idioma - debe enlazar el archivo "es_ES.js"
fields: {
nombre: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un nombre válido '
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
message: 'Solo letras, sin números o carácteres especiales'
},
stringLength: {
min: 3,
message: 'Mínimo 3 carácteres'
}
}
},
apellido: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un apellido válido'
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
message: 'Solo letras, sin números o carácteres especiales'
},
stringLength: {
min: 3,
message: 'Mínimo 3 carácteres'
}
}
},
documento: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un documento válido'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'Solo números'
},
stringLength: {
min: 5,
message: 'Mínimo 5 carácteres'
}
}
},
correo: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un correo válido'
},
regexp: {
regexp: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/,
message: 'No se aceptan carácteres especiales'
},
stringLength: {
min: 5,
message: 'Mínimo 5 carácteres'
}
}
},
contrasena: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese una contraseña válida'
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9]+$/,
message: 'No se aceptan carácteres especiales'
},
stringLength: {
min: 5,
message: 'Minimo 5 carácteres'
}
}
},
repetirContraseña: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Las contraseñas no coinciden'
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9]+$/,
message: 'No se aceptan carácteres especiales'
},
stringLength: {
min: 5,
message: 'Minimo 5 carácteres'
},
identical: {
field: 'contraseña',
message: 'Las contraseñas no coinciden'
}
}
},
direccion: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese una dirección válida'
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
message: 'No se aceptan carácteres especiales'
},
stringLength: {
min: 10,
message: 'Mínimo 10 carácteres'
}
}
},
tel: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un télefono válido'
},
regexp: {
regexp: /^[0-9-]+$/,
message: 'Sólo numeros'
},
stringLength: {
min: 7,
message: 'Mínimo 7 carácteres'
}
}
},
ciudad: {
validators: {
callback: {
message: 'Debe elegir su ciudad',
callback: function (value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('ciudad').val();
return (options !== null && options.length >= 1 && options.length <= 4);
}
}
}
},
genero: {
validators: {
callback: {
message: 'Debe elegir su género',
callback: function (value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('genero').val();
return (options !== null && options.length >= 1 && options.length <= 10);
}
}
}
},
'confirmar[]': {
row: '.form-group',
validators: {
notEmpty: {
message: 'Debe aceptar términos y condiciones'
},
stringLength: {
max: 1,
message: 'Debe aceptar términos y condiciones'
}
}
}
}
});
});
I know there is an event called success.form.fv but I don't know how to implement it. The sweetAlert alert that I want to output is:
swal("Successfully registered!", "Thanks for registering!", "success")
Thanks for helping.
Look at my form is this:
User Registration
<!-- nombre-->
<div class="form-group">
<label class="col-md-4 control-label" for="nombre" >Nombres:</label>
<div class="col-md-6">
<input id="nombre" name="nombre" type="text" placeholder="" maxlength="30" class="form-control input-md" tabindex="1" ></input>
</div>
</div>
<!-- Apellido-->
<div class="form-group">
<label class="col-md-4 control-label" for="apellido">Apellidos:</label>
<div class="col-md-6">
<input id="apellido" name="apellido" type="text" maxlength="30" placeholder="" class="form-control input-md" tabindex="2"></input>
</div>
</div>
<!-- Documento-->
<div class="form-group">
<label class="col-md-4 control-label" for="documento">N° Documento:</label>
<div class="col-md-6">
<input id="documento" name="documento" type="text" maxlength="10" placeholder="" class="form-control input-md" tabindex="3"></input>
</div>
</div>
<!-- Email-->
<div class="form-group">
<label class="col-md-4 control-label" for="correo">E-mail:</label>
<div class="col-md-6">
<input id="correo" name="correo" type="email" class="form-control" placeholder="[email protected]" tabindex="4" ></input>
</div>
</div>
<!-- Contraseña-->
<div class="form-group">
<label class="col-md-4 control-label" for="contrasena">Contraseña:</label>
<div class="col-md-6">
<input id="contrasena" name="contrasena" type="password" class="form-control" placeholder="********" tabindex="5" ></input>
</div>
</div>
<!-- Confirmar contraseña-->
<div class="form-group">
<label class="col-md-4 control-label" for="repetirContraseña">Confirmar contraseña:</label>
<div class="col-md-6">
<input id="repetirContraseña" name="repetirContraseña" type="password" class="form-control" placeholder="********" tabindex="6"></input>
</div>
</div>
<!-- Direccion-->
<div class="form-group">
<label class="col-md-4 control-label" for="direccion">Dirección:</label>
<div class="col-md-6">
<input id="direccion" name="direccion" type="text" placeholder="" class="form-control input-md" maxlength="50" tabindex="7"></input>
</div>
</div>
<!-- Telefono-->
<div class="form-group">
<label class="col-md-4 control-label" for="tel">Teléfono:</label>
<div class="col-md-6">
<input id="tel" name="tel" type="text" maxlength="15" placeholder="" class="form-control input-md" tabindex="8"></input>
</div>
</div>
<!-- Ciudad -->
<div class="form-group">
<label class="col-md-4 control-label" for="ciudad">Ciudad de residencia:</label>
<div class="col-md-6">
<select id="ciudad" name="ciudad" class="form-control" tabindex="10" >
<option selected="true" disabled="true">Seleccione Ciudad...</option>
<c:forEach var="objCiudad" items="#{controladorCiudad.listarCiudades()}">
<option value="#{objCiudad.idCiudad}">#{objCiudad.nombreCiudad}</option>
</c:forEach>
</select>
</div>
</div>
<!-- Fecha -->
<div class="form-group">
<label class="col-md-4 control-label" for="fechaN">Fecha de Nacimiento:</label>
<div class="col-md-6">
<input id="fechaN" name="fechaN" type="date" placeholder="" class="form-control input-md" max="1998-04-07" min="1950-12-31" tabindex="11"></input>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="genero">Género:</label>
<div class="col-md-6">
<select id="genero" name="genero" class="form-control" tabindex="10" >
<option selected="true" disabled="true">Seleccione Genero...</option>
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<div class="checkbox">
<label class="col-md-5 control-label"></label>
<div class="col-md-8">
<label><input type="checkbox" id="confirmar" name="confirmar" ></input>Acepto términos y condiciones</label>
</div>
</div>
</div>
</div>
<div id="condicion" class="col-md-12">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
<u>Para registarse en Effective Orders debe diligenciar todos los campos</u>
</div>
<!-- Boton -->
<div id="boton">
<div class="form-group">
<label class="col-md-4 control-label" for="Boton"></label>
<div class="col-md-4">
<h:commandButton id="Boton" type="submit" class="btn btn-success" value="Registrarme" action="#{controladorUsuario.registrarUsuario()}" tabindex="12"></h:commandButton>
</div>
</div>
</div>
</h:form>
And the validation is the script that I put first
Hi Leandro, it works wonders for me until I enter selects, then if I only fill in this field once, it sends the alert, could you help me? Thank you
var isvalid = false;
$(function() {
$('#profileForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
}
}
}).on('err.field.fv', function(e, data) {
isvalid = false;
}).on('success.field.fv', function(e, data) {
isvalid = true;
});;
$('#setValueButton').on('click', function() {
$('form').data('formValidation').validate();
if(isvalid){
alert("es valido");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form id="profileForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="button" class="btn btn-primary" id="setValueButton">Set values</button>
</div>
</div>
</form>
Analyze this implementation.
You will see how the
err.field.fv
y is usedsuccess.field.fv
to assign a flag that allows you to work with the button showing the alert.In your case, replace the javascript alert with sweetAlert.