VALIDAR ANTES DE ENVIAR FORM
Antes de enviar el form se valida cada campo por jquery. Probamos:
- Si el campo número no está vacío con $("#cantidad").val()==""
- Si el campo número es numérico con isNaN($("#cantidad").val()) que revuelve true si el parámetro NO es numérico.
- Que esté seleccionada una opción con $("#seleccione option:selected").text()=="-seleccione-"
- Que esté checada una o varias opciones con $("#c1").prop("checked")==false && $("#c2").prop("checked")==false && ... continuando los prop("checked") con el resto de las checkbox.
- El email lo probamos con una expresión regular y la función test() (/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/)
<head>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
$("#formulario").click(function(evento){
var texto="";
var valido = true;
// cantidad no nula y válida
if ($("#cantidad").val()==""){
valido = false;
texto=texto + "CANTIDAD: No puede ser nulo \n" ;
}else if (isNaN($("#cantidad").val())){
valido = false;
texto=texto + "CANTIDAD: No es un número válido \n";
}
// seleccion no nula y que no sea -seleccione-
if ($("#seleccione option:selected").text()=="-seleccione-" ){
texto= texto + "SELECCIONAR: Debe seleccionar una opcion \n"
valido = false;
}
// chequea que alguno este checked
if ($("#c1").prop("checked")==false && $("#c2").prop("checked")==false && $("#c3").prop("checked")==false && $("#c4").prop("checked")==false){
texto= texto + "OPTAR: Debe elegir alguna opción \n"
valido = false;
}
// cambiando la regexp chequea lo que sea
var emailtest = new RegExp(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/);
if ($("#email").val()==""){
valido = false;
texto=texto + "EMAIL: No puede estar vacío \n" ;
}else if (emailtest.test($("#email").val()) == false){
valido = false;
texto=texto + "EMAIL: el email no es válido \n";
}
// si todo quedó OK manda si no va al alert
if (valido){
return "true";
}else{
event.preventDefault();
alert(texto);
}
});
});
</script>
<?php
if($_POST) {
$mensaje="<span style='color:#009900; font-weight:bold;'>La acción se ejecuta</span>";
}else{
$mensaje="No pasa nada";
}
?>
<style type="text/css">
li{
margin-bottom: 10px;
list-style-type: none;
}
</style>
</head>
<body>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<ul>
<li>CANTIDAD:<strong>poner un número válido</strong></li>
<li><input type="text" name="cantidad" id="cantidad" value="" /> </li>
<li>SELECCIONAR: <strong>seleccionar una opción.</strong></li>
<li>
<select type="text" name="seleccione" id="seleccione" value="" style="width:150px; " >
<option value="-seleccione-" selected >-seleccione-</option>
<option value="1">SELECCIÓN 1</option>
<option value="2">SELECCIÓN 2</option>
<option value="3">SELECCIÓN 3</option>
</select>
</li>
<li>OPTAR:<strong>elegir uno o varios .</strong></li>
<li>
opción 1: <input type="checkbox" name="c1" id="c1" value="checkbox" />
opción 2: <input type="checkbox" name="c2" id="c2" value="checkbox" />
opción 3: <input type="checkbox" name="c3" id="c3" value="checkbox" />
opción 4: <input type="checkbox" name="c4" id="c4" value="checkbox" />
</li>
<li>EMAIL: <strong>poner un email válido</strong></li>
<li><input type="text" name="email" id="email" value="" /> </li>
<li><input type="Submit" name="Submit" value="EJECUTAR" style="margin-left:10px;" id="formulario" /></li>
<li><?php echo $mensaje; ?></li>
</ul>
</form>
</body>