good day. I am new to this programming and I need help to add a personalized validation of PARSLEY and validator. I have the validation by default and I want to give it the style that PARSLEY gives but I do not know how to do it in the js. I'm working jquery php ajax this is the code
<div class="modal-body">
<form data-parsley-validate class="form-horizontal form-label-left input_mask" method="post" id="forminsertar" name="forminsertar" role="form">
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control has-feedback-left" name="jNombre" id="jNombre" placeholder="Nombre">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jApellido" id="jApellido" placeholder="Apellido">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 xdisplay_inputx form-group has-feedback">
<input required="required" type="date" class="form-control has-feedback-left" name="jFecha" id="jFecha" placeholder="Fecha Nacimiento" aria-describedby="inputSuccess2Status4">
<span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"></span>
<span id="inputSuccess2Status4" class="sr-only">(success)</span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jCedula" id="jCedula" data-inputmask="'mask' : '999-9999999-9'" placeholder="Cedula">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control has-feedback-left" name="jCiudad" id="jCiudad" placeholder="Ciudad">
<span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jDireccion" id="jDireccion" placeholder="Direccion">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control has-feedback-left" name="jEstatura" id="jEstatura" data-inputmask="'mask' : '99'" placeholder="Estatura">
<span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jTelefono" id="jTelefono" data-inputmask="'mask' : '(999) 999-9999'" placeholder="Telefono">
<span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="jrefEquipo" name="jrefEquipo" class="form-control has-feedback-left" required>
<option value="0" selected>Sin Equipo</option>
<?php do { ?>
<option value="<?php echo $row_DatosEquipo["idEquipo"]?>" ><?php echo $row_DatosEquipo["eNombre"]?></option>
<?php
} while ($row_DatosEquipo = mysqli_fetch_assoc($DatosEquipo));
?>
</select>
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jNumero" id="jNumero" data-inputmask="'mask' : '999'" placeholder="Numero Chaqueta">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="jrefPosicion" name="jrefPosicion" class="form-control has-feedback-left" required>
<option value="0" selected>Sin Posicion</option>
<?php do { ?>
<option value="<?php echo $row_DatosPosicion["idPosicion"]?>" ><?php echo $row_DatosPosicion["pPosicion"]?></option>
<?php
} while ($row_DatosPosicion = mysqli_fetch_assoc($DatosPosicion));
?>
</select>
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jImagen" id="jImagen" placeholder="Imagen">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control has-feedback-left" name="jEmail" id="jEmail" placeholder="Email">
<span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jContraseña" id="jContraseña" placeholder="Contraseña">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>
<div class="form-group">
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancelar</button>
<button class="btn btn-primary" type="reset">Limpiar</button>
<button id="aceptar_jugador" type="button" class="btn btn-success">Guardar</button>
</div>
</div>
</form>
</div>
this is the js
$(document).ready(function(){
$("#jugador-add").click(function () {
$("#myModalj").modal();
$("#aceptar_jugador").unbind('click');
$("#aceptar_jugador").click(function () {
var jNombre = document.getElementById("jNombre").value;
var jApellido = document.getElementById("jApellido").value;
var jFecha = document.getElementById("jFecha").value;
var jCedula = document.getElementById("jCedula").value;
var jDireccion = document.getElementById("jDireccion").value;
var jCiudad = document.getElementById("jCiudad").value;
var jTelefono = document.getElementById("jTelefono").value;
var jEstatura = document.getElementById("jEstatura").value;
var jNumero = document.getElementById("jNumero").value;
var jrefEquipo = document.getElementById("jrefEquipo").value;
var jrefPosicion = document.getElementById("jrefPosicion").value;
var jEmail = document.getElementById("jEmail").value;
var jContraseña = document.getElementById("jContraseña").value;
if ( jNombre == "" || jApellido == "" || jFecha == "" || jCedula =="" || jDireccion =="" || jCiudad =="" || jTelefono =="" || jEstatura =="" || jNumero =="" || jEmail =="" || jContraseña =="") {
alert("Error: Todos los campos son obligatorios.");
} else {
$("#myModalj").modal('toggle');
var params = {jNombre, jApellido, jFecha, jCedula, jDireccion, jCiudad, jTelefono, jEstatura, jNumero, jrefEquipo, jrefPosicion, jEmail, jContraseña}
$.ajax({
type: 'POST',
url: 'jugador-insert.php',
data: params,
async:true,
success: function(respuesta) {
alert("Informacion: Jugador creado correctamente!");
location.reload();
}
});
}
});
});
/* final ajax añadir jugadores*/
});
he gives me the validation by defaul of the browser but I want to add as mentioned before PARSLEY
I understand that this part is what I should edit but I do not know how to do it
if ( jNombre == "" || jApellido == "" || jFecha == "" || jCedula =="" || jDireccion =="" || jCiudad =="" || jTelefono =="" || jEstatura =="" || jNumero =="" || jEmail =="" || jContraseña =="") {
alert("Error: Todos los campos son obligatorios.");
} else {
$("#myModalj").modal('toggle');