Estoy intentando Validar los campos de input del formulario utilizando Jquery , sin embargo no he podido conseguir mis resultados despues de varios intentos . El resultado que quiero conseguir es un texto al lado de las cajas que indique que o llenen la caja o ingresen datos validos.
he tratado de implementar Jquery de la siguientes maneras:
<head>
<meta charset="UTF-8">
<title>add</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$("#myForm").validate({
rules: {
TxtNombre: {
required: true
},
TxtApellidos: {
required: true
},
TxtCel: {
required: true,
minlength: 10
},
inputEmail: {
required: true,
email: true
},
InputURL: {
required: true,
url: true
}
},
messages: {
TxtNombre: {
required: "Por favor, ingrese su nombre"
},
TxtApellidos: {
required: "Por favor, ingrese sus apellidos"
},
TxtCel: {
required: "Por favor, ingrese su número de teléfono",
minlength: "Su número de teléfono debe tener 8 dígitos"
},
inputEmail: {
required: "Por favor, ingrese su correo electrónico",
email: "Por favor, ingrese un correo electrónico válido"
},
InputURL: {
required: "Por favor, ingrese la URL de su foto",
url: "Por favor, ingrese una URL válida"
}
}
});
});
</script>
segun tengo entendido deberia de enseñar mensajes de error cada vez que presiono submit , sin embargo eso no pasa.
Mi ultimo intento fue:
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$("#myForm").validate({
rules: {
TxtNombre: {
required: true
},
TxtApellidos: {
required: true
},
TxtCel: {
required: true,
minlength: 10
},
inputEmail: {
required: true,
email: true
},
InputURL: {
required: true,
url: true
}
},
messages: {
TxtNombre: {
required: "Por favor, ingrese su nombre"
},
TxtApellidos: {
required: "Por favor, ingrese sus apellidos"
},
TxtCel: {
required: "Por favor, ingrese su número de teléfono",
minlength: "Su número de teléfono debe tener al menos 8 dígitos"
},
inputEmail: {
required: "Por favor, ingrese su correo electrónico",
email: "Por favor, ingrese un correo electrónico válido"
},
InputURL: {
required: "Por favor, ingrese la URL de su foto",
url: "Por favor, ingrese una URL válida"
}
},
onfocusout: function (element) {
this.element(element);
}
});
});
$(document).ready(function () {
$('#myForm').validate({
rules: {
TxtNombre: {
required: true
},
TxtApellidos: {
required: true
},
TxtCel: {
required: true,
minlength: 10
},
inputEmail: {
required: true,
email: true
},
InputURL: {
required: true,
url: true
}
},
messages: {
TxtNombre: {
required: "Por favor, ingrese su nombre"
},
TxtApellidos: {
required: "Por favor, ingrese sus apellidos"
},
TxtCel: {
required: "Por favor, ingrese su número de teléfono",
minlength: "Su número de teléfono debe tener al menos 8 dígitos"
},
inputEmail: {
required: "Por favor, ingrese su correo electrónico",
email: "Por favor, ingrese un correo electrónico válido"
},
InputURL: {
required: "Por favor, ingrese la URL de su foto",
url: "Por favor, ingrese una URL válida"
}
},
onfocusout: function (element) {
this.element(element);
},
submitHandler: function (form) {
//Ni idea ahora
alert('El formulario se envió correctamente!');
form.submit(); // Si deseas enviar el formulario después de la validación exitosa
return false; // Si no deseas enviar el formulario después de la validación exitosa
}
});
});
</script>
</head>
<div class="container">
<form class="row" id="myForm">
<!-- Lado izquierdo -->
<div class="col-6">
<div>
<label for="TxtNombre" class="form-label">Nombres</label>
<input type="text" class="form-control" id="TxtNombre" name="TxtNombre">
<div class="invalid-feedback"></div>
</div>
<div class="my-4">
<label for="genero">Genero</label>
<select class="form-select" id="genero" name="genero" aria-label="Seleccionar">
<option value="">Seleccione su genero</option>
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
</select>
<div class="invalid-feedback"></div>
</div>
<div class="my-4">
<label for="sangre">Tipo de Sangre</label>
<select class="form-select" id="sangre" name="sangre" aria-label="Seleccionar">
<option value="">Seleccione su tipo de sangre</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
</select>
<div class="invalid-feedback"></div>
</div>
<div>
<button class="btn btn-primary" type="submit">Ingresar</button>
</div>
</div>
<!-- Lado derecho -->
<div class="col-6">
<div>
<label for="TxtApellidos" class="form-label">Apellidos</label>
<input type="text" class="form-control" id="TxtApellidos" name="TxtApellidos">
<div class="invalid-feedback"></div>
</div>
<div>
<label for="TxtCel" class="form-label">Telefono Personal</label>
<input type="tel" class="form-control" id="TxtCel" name="TxtCel">
<div class="invalid-feedback"></div>
</div>
<div>
<label for="inputEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail" name="inputEmail">
<div class="invalid-feedback"></div>
</div>
<div>
<label for="InputURL" class="form-label">Fotografia</label>
<input type="url" class="form-control" id="InputURL" name="InputURL">
<div class="invalid-feedback"></div>
</div>
</div>
</form>
</div>
cualquier aclaracion seria de gran ayuda ya que no tengo mucha experiencia con cshtml. Algo a mencionar que tengo los nuggets / librerias las tengo instaladas , es un proyecto MVC , utilizando capas en .net framework