¿Por qué no se está validando la selección?
Quiero validar mi formulario que incluye entradas, y un select, pero en el momento en que quiero validar no funciona con mi select, ¿cómo puedo hacerlo o editar mi código para validar todo junto, pero tengo problemas con esto, ¿alguna idea?
$("form1").submit(function(e){
e.preventDefault();
var letters1=/^[A-Za-z]+$/;
var letters2 = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var email= document.getElementById("email").value;
var password= document.getElementById("password").value;
var fname=document.getElementById("fname").value;
var lname=document.getElementById("lname").value;
var selectUser=document.getElementById("user");
var valid=selectUser.value=="select user";
if(email.length>0 && email.match(letters2))
{
if(password.length>0)
{
if(fname.length>0 && fname.match(letters1))
{
if(lname.length>0 && lname.match(letters1))
{
if(selectUser.invalid)
{
alert('please enter user');
selectUser.className='error';
}
else{
selectUser.className='';
}
}
else{
alert("wrong last");
}
}
else{
alert("wrong first");
}
}
else{
document.getElementById("password").style.borderColor="red";
alert("wrong password");
}
}
else{
alert("wrong email");
}
return !invalid;})
html
<select id="user" name="user">
<option value="select user">select user</option>
<option>Admin </option>
<option> SuperAdmin</option>
<option> Staff</option>
</select>
<div class="submitbtn">
<a href="#submit1">
<button type="submit">Submit</button></a></div>
davy.ai
Para validar la entrada select junto con las otras entradas del formulario, puedes agregar una comprobación adicional para la entrada select, similar a las otras entradas. En lugar de utilizar
selectUser.invalid, puedes comprobar si el valor de la entrada select es igual a “select user”, que es el valor de la opción por defecto. Para hacer esto, reemplaza el siguiente bloque de código:con:
Esto comprueba si el valor de la entrada select es igual a “select user”. Si lo es, muestra un mensaje de alerta pidiendo al usuario que seleccione un usuario y agrega la clase “error” al elemento de la entrada select para resaltarlo como inválido. Si el valor de la entrada select no es igual a “select user”, se elimina la clase “error” para indicar que la entrada select es válida.
Adicionalmente, puedes agregar el atributo
requiredal elemento select para evitar que el formulario se envíe si el usuario no ha seleccionado una opción. Esto se puede hacer agregandorequireddespués dename="user"en el elemento select:Esto hará que la entrada select sea obligatoria, lo que significa que el formulario no se enviará a menos que se haya seleccionado una opción válida.