WordPress上的验证表格

Question

I have a custom form in wordpress, with radioboxes and custom fields. I want to validate it prior to sending, and I´ve implemented the following JavaScript code:

<script type="text/javascript">// <![CDATA[
function validar()
{
     if(document.form1.duracion.value=="")
    {
        alert("Falta seleccionar la duración del Vídeo.")
        return false
    }
     if(document.form1.idiomas.value=="")
    {
        alert("Falta seleccionar el número de idiomas")
        return false
    }
     if(document.form1.provincias.value=="")
    {
        alert("Falta seleccionar el tipo de Post-Producción")
        return false
    }
     if(document.form1.zonas.value=="")
    {
        alert("Faltan seleccionar las zonas de grabación")
        return false
    }
}
function MM_validateForm() { //v4.0
  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+='- El '+nm+' tiene algo mal escrito.\n';
    } else if (test!='R') { num = parseFloat(val);
      if (isNaN(val)) errors+='- ¿El '+nm+' no debería ser un número?\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+' debería ser un número entre '+min+' y '+max+'.\n';
  } } } else if (test.charAt(0) == 'R') errors += '- Nos gustaría saber tu '+nm+'\n'; }
} if (errors) alert('¡UPS! ¡Nos faltan tus datos de contacto!:\n'+errors);
document.MM_returnValue = (errors == '');
} }
//-->
</script>

The problem is that I only can put this code in the post body, not in the head. Then, I have the form button:

<input id="button" onclick="MM_validateForm('nombre','','R','empresa','','R','telefono','','RisNum','mail','','RisEmail');return document.MM_returnValue" type="submit" name="button" value="Obtener Presupuesto Instantáneo" />

The problem is, that it does not work. I´m not very confident on coding, so any help will be very useful. Also, If somebody has the abilities to make it work (both with JS, Jquery or anything), I´ll pay for the service.

Thanks.

Xabier

Answer 1

If you are not against JQuery you can use this plugin . Its quite enough for 90% of validation tasks

Answer 2

我相信使用此插件远离编码会容易得多

Answer 3

To have real time validation before form submission you could use eg

$('#myInputField').on('keyup', function(){})

Here is an example in a jsfiddle where I have put real time validation on a field. Just and example I have asked that the username should be a length of 8 characters and applied validation accordingly. Using this method you can validate your input fields before even pressing the button.

http://jsfiddle.net/y7bet/