Estoy tratando de obtener un mensaje de error cuando la selección está configurada como predeterminada y no se selecciona nada. Para los campos de entrada, el código funciona, pero no puedo averiguar dónde me equivoco para la parte seleccionada. ¿Alguien me ayuda?
Violín: https://jsfiddle.net/snake93/1sLtk2a7/2/
//Error Msg for input field function validateForm() { let x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } } <input type="text" name="fname" form="myForm"> <select id="select-sex" form="myForm" name="radios"> <option id="opt-default" form="myForm" selected>Select...</option> <option id="sexuomo" name="radios" value="Male" form="myForm">Uomo</option> <option id="sexdonna" name="radios" value="Female" form="myForm">Donna</option> </select> <button onclick="validateForm()">Submit</button> <form name="myForm" id="myForm" onsubmit="return validateForm()" method="post"> </form>Simplemente repita la lógica que usó en la input para la select :
//Error Msg for input field function validateForm() { let x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } let y = document.forms["myForm"]["radios"].value; if (y == "Select...") { alert("Select must be filled out"); return false; } } <input type="text" name="fname" form="myForm"> <select id="select-sex" form="myForm" name="radios"> <option id="opt-default" form="myForm" selected>Select...</option> <option id="sexuomo" name="radios" value="Male" form="myForm">Uomo</option> <option id="sexdonna" name="radios" value="Female" form="myForm">Donna</option> </select> <button onclick="validateForm()">Submit</button> <form name="myForm" id="myForm" onsubmit="return validateForm()" method="post"> </form> Sin embargo, una solución mucho más escalable es agregar el campo required a sus entradas y luego usar checkValidity() :
function validateForm(){ const isValid = myForm.checkValidity(); if(!isValid){ alert("Please fill all fields"); } return isValid; } <form name="myForm" id="myForm" onsubmit="return validateForm()" method="post" novalidate> <input type="text" name="fname" form="myForm" required> <select id="select-sex" form="myForm" name="radios" required> <option id="opt-default" value="" form="myForm" selected disabled>Select...</option> <option id="sexuomo" name="radios" value="Male" form="myForm">Uomo</option> <option id="sexdonna" name="radios" value="Female" form="myForm">Donna</option> </select> <button>Submit</button> </form>Una <option> sin un value= por defecto es el valor de texto de esa opción. es decir
<option>Seleziona</option>es lo mismo que
<option value="Seleziona">Seleziona</option>Por lo tanto, debe verificar "Seleziona" o debe darle un valor.
<option value="">Seleziona</option>Nota: Seleziona viene de OPs fiddle
Fragmento actualizado:
//Error Msg for input field function validateForm() { let name = document.forms["myForm"]["fname"].value; let gender = document.forms["myForm"]["radios"].value; if (name == "" || gender == "") { alert("Name and gender must be filled out"); return false; } } <input type="text" name="fname" form="myForm"> <select id="select-sex" form="myForm" name="radios"> <option id="opt-default" form="myForm" value="" selected>Seleziona</option> <option id="sexuomo" name="radios" value="Male" form="myForm">Uomo</option> <option id="sexdonna" name="radios" value="Female" form="myForm">Donna</option> </select> <button onclick="validateForm()">Submit</button> <form name="myForm" id="myForm" onsubmit="return validateForm()" method="post"> </form>