Jquery: encuentre mis campos requeridos en mis conjuntos de campos visibles y muestre el mensaje
Quiero encuentra todos los campos requeridos en mi formulario que son dentro de un conjunto de campos que es actualmente visible. De hecho, usaré este código cuando el usuario envíe el formulario, pero para la prueba estoy usando un botón simple para verificar el conjunto de campos visibles, luego los campos dentro de esos conjuntos de campos visibles que son requeridos [señalado por el nombre de la clase que termina con -requerido]. Estos campos pueden ser cuadros de texto, radios, casillas de verificación, etc. Luego determine si están vacíos. Si está vacío, proporcione un mensaje en mi div que indique al usuario qué campos no están completos.
Pensé que había descubierto este código con la ayuda de otro stackOverflower, pero simplemente no funciona en mi código. ¿Alguien podría proporcionar alguna idea, por favor?
mi violín aquí: http://jsfiddle.net/justmelat/jVktq/
Mi html aquí:
<form method="post" action="">
<div id="holdErrMsg"></div>
<fieldset id="mainSection" name="mainSection">
<legend style="color:blue; font-weight:bold">Project Overview Section</legend>
<table style="width: 100%">
<tr>
<td style="height: 33px; width: 178px;">Name</td>
<td style="height: 33px"><input id="1125" name="1125" type="text" /></td>
</tr>
<tr>
<td style="height: 33px; width: 178px;">Email</td>
<td style="height: 33px"><input id="1026" name="1026" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Title</td>
<td><input id="1089" name="1089" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Type</td>
<td><select id="1169" name="1169">
<option value="">Select</option>
<option value="Cars">Cars</option>
<option value="Boats">Boats</option>
<option value="Planes">Planes</option>
</select></td>
</tr>
<tr><td>
<button id="btnCatchReqFlds" type="button" name="btn">Check Required Fields</button>
</td></tr>
</table>
</fieldset>
<fieldset id="section-11" name="section-11">
<legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:*</label></td>
<td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:*</td>
<td style="height: 35px">
<select id="1433" class="1433-required" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset id="section-12" name="section-12">
<legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color*:</td>
<td style="height: 35px">
<input type="checkbox" name="1433[]" id="1433[]" value"Orange" class="1433[]-required"/>Orange
<input type="checkbox" name="1433[]" id="1433[]" value"Blue" class="1433[]-required"/>Blue
<input type="checkbox" name="1433[]" id="1433[]" value"Green" class="1433[]-required"/>Green
</td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset id="section-13" name="section-13">
<legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:*</td>
<td style="height: 35px">
<input type="radio" name="1834" id="1834" value="None" class="valuetext" class="1834-required">None
<input type="radio" name="1834" id="1834" value="All" class="valuetext" class="1834-required">All
</td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset><br>
<fieldset id="section-1011" name="section-1011">
<legend style="color:green; font-weight:bold">Misc Info Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1302" name="1302">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
</form>
mi jquery aquí:
$("#section-11").hide();
$("#section-12").hide();
$("#section-13").hide();
$("#section-1011").hide();
var projtype = new Array(
{value : 'Cars', sect_id : 'fieldset#section-11'},
{value : 'Planes', sect_id : 'fieldset#section-12'},
{value : 'Boats', sect_id : 'fieldset#section-13'}
);
$("select#1169").on('change',function () {
var thisVal = $(this).val();
var sect_id ="";
//$('fieldset[id!="mainSection"]').hide();
$(projtype).each(function() {
$(this.sect_id).hide();
if(this.value == thisVal) {
$(this.sect_id).show();
}
});
});
$("#btnCatchReqFlds").on('click', function() {
var requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function() {
return $.trim($(this).val()) === "";
});
if ($requiredButEmpty.length) {
$requiredButEmpty.each(function () {
$("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
});
}
return !$requiredButEmpty.length;
});
preguntado el 03 de mayo de 12 a las 19:05
user1176783
4 Respuestas
Tal vez fuera del contexto de su código, pero podría responder a su pregunta:
Si usa html5, simplemente puede agregar un required atribuya a sus entradas requeridas, así:
<input type="text" required />
En tu jQuery solo validalos:
var errorList = [];
function validateRequiredFields(){
$("input").each(function(){
if($(this).attr("required") && $(this).val() === ""){
errorList.push($(this).attr("name"));
}
});
showErrors();
}
function showErrors(){
$("#holdErrMsg").html("Please fill in this fields: " + errorList.toString());
errorList = [];
}
Llame a validateRequiredFields antes de enviar.
Además, si desea hacer coincidir patrones específicos (es decir, solo números), puede agregar un pattern atributo a la entrada (en caso de que sea de tipo texto) e intente hacer coincidir la expresión regular. Es decir, un campo de número de teléfono de 10 dígitos:
<input type="text" required pattern="^[0-9]{0,10}$" />
Entonces su validateRequiredFields() sería algo como:
function validateRequiredFields(){
$("input").each(function(){
if($(this).attr("required")){
if($(this).attr("pattern") && !(new RegExp($(this).attr("pattern"))).test($(this).val())){
errorList.push($(this).attr("name"));
}
else if($(this).val() === ""){
errorList.push($(this).attr("name"));
}
}
});
showErrors();
}
contestado el 03 de mayo de 12 a las 21:05
En primer lugar, tienes un error tipográfico.
var requiredButEmpty
necesita ser
var $requiredButEmpty
Además, realmente no puede usar esa función para marcar casillas de verificación y botones de radio porque necesitaría ver si están marcados o seleccionados. Verificar el valor de estos no funcionaría.
contestado el 03 de mayo de 12 a las 19:05
En segundo lugar, su selector está encontrando 0 coincidencias, iría con:
http://jsfiddle.net/justmelat/jVktq/
Su violín de ejemplo tiene 0 clases con la clase requerida. Una vez que agregué eso, su código funcionó bien.
contestado el 03 de mayo de 12 a las 19:05
Tejs: cuando dice que no tengo clases requeridas, los campos que se enumeran como requeridos son así [ ] así que busco el campo dentro del FS visible que termina en -requerido. - user1176783
En tu violín, ninguno de los campos tenía un *-required nombre de la clase. - Tejas
No tengo idea de qué código están ejecutando en sus violines porque los dos violines vinculados anteriormente fallan cuando intento ejecutarlos.
Solo para comenzar con la limpieza del código:
if ($requiredButEmpty.length) {
$requiredButEmpty.each(function () {
$("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
});
}
no es realmente necesario. Simplemente puede ser:
requiredButEmpty.each(function () {
$("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
});
ya que no se ejecutará más de 0 veces si no hay longitud.
*** También tenga en cuenta que eliminé el $ delante de requiredButEmpty ya que está devolviendo un objeto jquery, no necesita seguir haciendo referencia a él con $ (var) (a menos que sea simplemente un error tipográfico, entonces n/m).
Además, no sé para qué es esta línea.
return !$requiredButEmpty.length;
Como se trata de una función anónima que se llama desde un controlador de eventos, no es necesario devolver nada, no lo devolverá a ningún lado.
Creo que lu1s lo tiene bastante correcto. La única pequeña variación es que si no está usando html5, o si sabe que tendrá usuarios que no usan navegadores que lo admitan, puede poner manualmente una clase = "requerido" para ellos y luego simplemente buscar :
$('.required').forEach(function(){
if ($(this).val==='')
--push to array
});
contestado el 03 de mayo de 12 a las 20:05
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery or haz tu propia pregunta.
wow, no puedo creer que los haya pasado por alto, bueno, sí puedo. Gracias y eso hizo toda la diferencia. He actualizado mi violín. - user1176783