lunes, 20 de febrero de 2017
JavaScritp Validar campos de formulario
Veamos como mediante JavaScript, podemos validar unos campos de texto para que sean obligatorios antes de enviar un formulario o se compruebe que el campo mail tiene una @.
Nos saltamos las meta xhtml.
<head>
<!-- El código -->
<script type="text/JavaScript">
<!--
function MM_validateForm() {
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
//-->
</script>
</head>
<body style="text-align:center; margin-top:10px; margin-bottom:0px">
<div id="head">
<font size='6'>
JUAN MANUEL BARRÓS PAZOS
</font>
<br />
<font size='2'>
PALMA DE MALLORCA ~ PROGRAMACIÓN & DISEÑO.
</font>
</div>
<div style="clear:both"></div>
<div style="margin-left:auto; color:#666666; padding-top:20px; margin-bottom:2px; text-align:center;">
Cumplimente el formulario.
<br />
</div>
<div style="margin-left:auto; margin-right:auto; text-align:left; width:500px"> <span style="color:#0080C0;">Los campos con <span style="color:#FF0000;">*</span> son obligatorios para enviar correctamente el formulario.</span>
<br />
<form id="form1" name="form1" method="post" action="contacto.php">
<table style="color:#666666" width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Nombre:</td>
<td width="12"><span style="color:#FF0000;">*</span></td>
<td><input name="Nombre" type="text" id="Nombre" size="40" maxlength="35" /></td>
</tr>
<tr>
<td>Apellidos:</td>
<td><span style="color:#FF0000;">*</span></td>
<td><input name="Apellidos" type="text" id="Apellidos" size="40" maxlength="35" /></td>
</tr>
<tr>
<td>Email:</td>
<td><span style="color:#FF0000;">*</span></td>
<td><input name="Email" type="text" id="Email" size="40" maxlength="40" /></td>
</tr>
<tr>
<td>Asunto:</td>
<td><span style="color:#FF0000;">*</span></td>
<td><input name="Asunto" type="text" id="Asunto" size="40" maxlength="25" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<div align="right">
<!-- Hemos de fijarnos que el parametro onclick() contiene el nombre de los id de los campos a validar -->
<input name="enviar" type="submit" class="boton" id="enviar" onclick="MM_validateForm('Nombre','','R','Apellidos','','R','Email','','RisEmail','Asunto','','R');return document.MM_returnValue" value="Enviar" />
<input type="reset" name="Submit2" value="Cleaner" accesskey="L" tabindex="17" />
</div>
</td>
</tr>
</table>
</form>
</div>
<div style="clear:both"></div>
<!-- Inicio footer -->
<div id="footer" style="margin-top:36px">
© Juan Barrós Pazos.</div>
<!-- Fin footer -->
</body>
</html>
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario
Gracias por vuestros aportes.