EJEMPLO GENERAL:
<!DOCTYPE>
<html>
<head>
<style>
.valid { border: 2px solid green; }
.error { border: 1px solid red; } /* la clase la pone automaticamente el Jquery Validate */
li label { border:0px !important;font-size:11px;color:#FF0000;font-weight:bold; }
ul, li { list-style:none; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script>
$(function() {
$.validator.addMethod("checkLetraNumSpace", function(value, element) {
return this.optional(element) || /^[a-z0-9\-\s]+$/i.test(value);
}, "");
$.validator.addMethod("checkCIF", function(value, element) {
"use strict";
var sum,
num = [],
controlDigit;
value = value.toUpperCase();
if (!value.match( '((^[A-Z]{1}[0-9]{7}[A-Z0-9]{1}$|^[T]{1}[A-Z0-9]{8}$)|^[0-9]{8}[A-Z]{1}$)')) {
return false;
}
else
return true;
}, "");
$('#formLSG').validate({
rules: {
'nombre': {required:true,minlength:10 },
'email': {required: true, email:true},
'telefono': { required:true, minlength:9, checkLetraNumSpace: true },
'cp': {required:true, number:true, minlength:5,maxlength:5 },
'cif': {required:true, checkCIF: true },
'ciudad[]': {
required: true,
minlength: 2
},
'edad[]': {
required: true,
minlength: 1
}
},
wrapper: "li",
errorPlacement: function(label, elem) {
elem.closest("fieldset").find(".messages").append(label);
},
messages: {
'nombre': {
'required': 'El nombre es un campo requerido',
'minlength': 'El nombre Debe tener como mínimo 10 caracteres'
},
'telefono': {
'required': 'El teléfono es un campo requerido',
'minlength': 'El teléfono Debe tener como mínimo 9 caracteres',
'checkLetraNumSpace': 'Ese formato de teléfono no es correcto'
},
'email': {
'required': 'El email es un campo requerido',
'email': 'Ese formato de email no es correcto'
},
'telephone': {
'required': 'El teléfono es un campo requerido',
'minlength': 'El teléfono Debe tener como mínimo 9 caracteres',
'checkLetraNumSpace': 'El teléfono solo permite letras, números y espacios'
},
'cp': {
'required': 'El CP es un campo requerido',
'minlength': 'El CP Debe tener como mínimo 5 números',
'maxlength': 'El CP Debe tener como máximo 5 números',
'number': 'El CP Debe ser numérico'
},
'cif': {
'required': 'El CIF es un campo Requerido',
'checkCIF': 'Formato incorrecto de CIF'
},
'ciudad[]': 'Debes marcar al menos dos ciudades',
'edad[]': 'Debes marcar al menos una edad'
},
success: function(label) {
label.addClass("valid");
},
error: function(label) {
}
});
});
</script>
</head>
<body>
<form action="xxx.php" method="post" name="formLSG" id="formLSG">
<fieldset><legend>Nombre</legend>
<ul class="messages"></ul>
<input id="nombre" name="nombre" value="" type="text"><br>
</fieldset>
<fieldset><legend>Teléfono</legend>
<ul class="messages"></ul>
<input id="telefono" name="telefono" value="" type="text"><br>
</fieldset>
<fieldset><legend>Email</legend>
<ul class="messages"></ul>
<input id="email" name="email" value="" type="text"><br>
</fieldset>
<fieldset><legend>CP</legend>
<ul class="messages"></ul>
<input id="cp" name="cp" value="" type="text"><br>
</fieldset>
<fieldset><legend>CIF</legend>
<ul class="messages"></ul>
<input id="cif" name="cif" value="" type="text"><br>
</fieldset>
<fieldset><legend>Ciudad:</legend>
<ul class="messages"></ul>
<input type="checkbox" id="ciudad[]" name="ciudad[]" value="1"> Madrid
<input type="checkbox" id="ciudad[]" name="ciudad[]" value="2"> Barcelona
<input type="checkbox" id="ciudad[]" name="ciudad[]" value="3"> Valencia
</fieldset>
<fieldset><legend>Edad:</legend>
<ul class="messages"></ul>
<input type="radio" id="edad[]" name="edad[]" value="1"> Entre 21 y 30
<input type="radio" id="edad[]" name="edad[]" value="2"> Entre 31 y 40
<input type="radio" id="edad[]" name="edad[]" value="3"> Entre 41 y 50
</fieldset>
<input type="submit" value="Aceptar" name="btn_form">
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario