jquery - test - sistema de votacion en php y mysql
JQuery Valida múltiples campos con un error (7)
Este código mostrará un error común si alguno de los campos requeridos está en blanco.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message =''You missed '' + errors + '' fields.'';
$("#messageBox").html(message);
$("#messageBox").show();
} else {
$("#messageBox").hide();
}
},
showErrors: function(errorMap, errorList) {
},
submitHandler: function() { alert("Submit!") }
})
});
</script>
</head>
<body>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<div id="messageBox"></div>
<ul id="errorlist"></ul>
<form id="myform" action="/loginurl" method="post">
<label>DOB1</label>
<input name="dob1" class="required" />
<label>DOB2</label>
<input name="dob2" class="required" />
<label>DOB3</label>
<input name="dob3" class="required" />
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
¿Cómo usaría el complemento JQuery Validate para tener un mensaje de error para los 3 campos? Por ejemplo 3 campos dob. Por defecto, recibiré 3 mensajes de error si los 3 campos se dejan en blanco. Solo quiero un error vinculado a 3 campos. Si alguno está en blanco el error aparece.
Mi opinión fue cambiar el jQuery validator para validar cualquier cosa con el atributo validateable en él, así como las entradas estándar. Puede obtener la versión 1.9.0 modificada del complemento here
Básicamente importas el nuevo validador de jquery y haces algo como esto:
<script>
$.validator.addMethod(
"groupnotnull",
function(value, element) {
return $("input[type=''text'']:filled",element).length!=0;
},
function(regexp, element) {
return "At least one input must be specified";
}
);
</script>
<div validateable="true" name="groupValidated" groupnotnull="true">
<input type="text" name="foo"/>
<input type="text" name="blah"/>
</div>
Las modificaciones requeridas en el jQuery validator fueron para hacer que use .attr(''name'') lugar de .name porque .name solo funciona en campos de formulario. Y modifique los manejadores de claves, etc. para enlazar a los hijos del elemento validateable .
Esto es un poco más dinámico que los grupos en el sentido de que permite validar los campos entre sí en lugar de solo como entidades individuales.
Pensé que debería compartir esto. El código completo que funcionó para mí.
HTML
<div class="clearfix bl">
<label>Fecha de nacimiento</label>
<select name="fechanacimdia" id="fechanacimdia"></select>
<select name="fechanacimmes" id="fechanacimmes"></select>
<select name="fechanacimano" id="fechanacimano"></select>
</div>
JS
//hay que poblar selects de fecha
dia = $(''#fechanacimdia'');
mes = $(''#fechanacimmes'');
ano = $(''#fechanacimano'');
dia.append(''<option>Día</option>'');
for(i=1;i<=31;i++) {
dia.append(''<option value="''+i+''">''+i+''</option>'');
}
meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]
mes.append(''<option>Mes</option>'');
for(i=1;i<=12;i++) {
mes.append(''<option value="''+i+''">''+meses[i-1]+''</option>'');
}
d = new Date();
year = d.getFullYear();
maxage = 100;
minage = 16;
ano.append(''<option>Año</option>'');
for(i=year-minage;i>=year-maxage;i--) {
ano.append(''<option value="''+i+''">''+i+''</option>'');
}
//--------- validate ------------------------
$(''#formulario'').validate({
rules: {
fechanacimdia: { required: true },
fechanacimmes: { required: true },
fechanacimano: { required: true, validdate: true }
},
groups: {
fechanacim: "fechanacimdia fechanacimmes fechanacimano"
},
messages: {
fechanacimdia: "Fecha de nacimiento no es válida.",
fechanacimmes: "Fecha de nacimiento no es válida.",
fechanacimano: "Fecha de nacimiento no es válida."
},
});
//funcion auxiliar para validar fecha de nacimiento correcta
jQuery.validator.addMethod("validdate", function(value, element) {
var month = +$(''#fechanacimmes'').val() - 1; // Convert to numbers with "+" prefix
var day = +$(''#fechanacimdia'').val();
var year = +$(''#fechanacimano'').val();
var date = new Date(year, month, day); // Use the proper constructor
return date.getFullYear() == year && date.getMonth() == month && date.getDate() == day;
});
Puede utilizar la opción de grupos para agrupar las entradas. Si cada una de las entradas tiene un mensaje de error, solo se mostrará una.
Probablemente querrá anular los mensajes asociados con cada uno de los campos, para que tengan más sentido. Por ejemplo, de forma predeterminada, puede recibir un mensaje de error como "Este campo es obligatorio". Bueno, eso no hace mucho bien al usuario cuando hay tres entradas. Probablemente desee anular el mensaje para decir "Se requiere el número local". Para este ejemplo, acabo de anular todos los mensajes de error con "Ingrese un número de teléfono válido".
<input type="text" name="countryCode" />
<input type="text" name="areaCode" />
<input type="text" name="localNumber" />
groups: {
phoneNumber: "countryCode areaCode localNumber"
},
rules: {
''countryCode'': {
required: true,
minlength:3,
maxlength:3,
number:true
},
''contactInformation[areaCode]'': {
required: true,
minlength:3,
maxlength:3,
number:true
},
''contactInformation[localNumber]'': {
required: true,
minlength:4,
maxlength:4,
number:true
},
},
messages: {
"countryCode": {
required: "Please enter a valid Phone Number",
minlength: "Please enter a valid Phone Number",
maxlength: "Please enter a valid Phone Number",
number: "Please enter a valid Phone Number"
},
"areaCode": {
required: "Please enter a valid Phone Number",
minlength: "Please enter a valid Phone Number",
maxlength: "Please enter a valid Phone Number",
number: "Please enter a valid Phone Number"
},
"localNumber": {
required: "Please enter a valid Phone Number",
minlength: "Please enter a valid Phone Number",
maxlength: "Please enter a valid Phone Number",
number: "Please enter a valid Phone Number"
}
},
Similar a la de Chris
$("form").validate({
rules: {
DayOfBirth: { required: true },
MonthOfBirth: { required: true },
YearOfBirth: { required: true }
},
groups: {
DateofBirth: "DayOfBirth MonthOfBirth YearOfBirth"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "DayOfBirth" || element.attr("name") == "MonthOfBirth" || element.attr("name") == "YearOfBirth")
error.insertAfter("#YearOfBirth");
else
error.insertAfter(element);
}
});
Un par de opciones: Echa un vistazo a errorContainer . Puede hacer que todos los errores se dirijan a un <div> completamente separado. O puede revisar el bloque invalid y simplemente tener un errorMessage.show() .
esto es para la parte HTML:
<div>
<p class="myLabel left">Date of birth:</p>
<p class="mandatory left">*</p>
<div class="left">
<p><input type="text" name="dobDay" class="required" /></p>
<p><i>dd</i></p>
</div>
<div class="left">
<p><input type="text" name="dobMonth" class="required" /></p>
<p><i>mm</i></p>
</div>
<div class="left">
<p><input type="text" name="dobYear" class="required" /></p>
<p><i>yyyy</i></p>
</div>
<div class="clear"></div>
<div class="myError">
<label for="dateOfBirth" class="error">Please enter a valid date.</label>
</div>
</div>
Este es el script que utilicé:
$(document).ready(function() {
$("#myForm").validate({
groups: {
dateOfBirth: "dobDay dobMonth dobYear"
},
rules: {
''dobDay'': {
required: true,
minlength:1,
maxlength:2,
range: [1, 31],
number:true
},
''dobMonth'': {
required: true,
minlength:1,
maxlength:2,
range: [1, 12],
number:true
},
''dobYear'': {
required: true,
minlength:4,
maxlength:4,
number:true
},
},
});
});
Toda la parte HTML se puede personalizar como mejor le parezca. Utilicé este diseño complejo porque necesitaba agregar este campo a un formulario ya existente. ¡Pero es un ejemplo que funciona! Espero que ayude a cualquiera!