JavaScript/Casos concretos de formularios

JavaScript
	Casos concretos de formularios

Restricións de completado de campos

Se se quere evitar mediante JavaScript que se envíe un formulario se antes non se engadiu contido a un dos seus campos, pode facerse do seguinte xeito:

<!-- [...] -->

<script type="text/javascript" language="javascript">

  function ComprobarOsCampos(formulario)
  {
    if (formulario.correo.value == "") // Se o campo do correo está baleiro.
    {
      alert("Ten que escribir o seu correo electrónico.");
      formulario.correo.focus(); // Enfócase o campo do correo.
      return(false); // Devólvese «false» para evitar que se envíen os datos do formulario.
    }
    else return(true); // Se o campo ten contido, envíanse os datos do formulario.
  }

</script>

<!-- [...] -->

<form name="formulario" onsubmit="return ComprobarOsCampos(formulario)" action="guión.php" method="post" >
  <!-- Campos: -->
  Nome: <input type="text" name="nome" id="nome" /><br />
  Apelidos: <input type="text" name="apelidos" id="apelidos" /><br />
  Correo: <input type="text" name="correo" id="correo" />

  <!-- Botóns: -->
  <p><input type="submit" value="Enviar" /><input type="reset" value="Borrar" /></p>
</form>

<!-- [...] -->

Restricións de escolla de opcións

A continuación amósanse algunhas formas de evitar que se envíen os datos dun formulario sen antes escollerse unha opción:

<!-- [...] -->

<script type="text/javascript" language="javascript">

  function VerificarOFormulario(formulario)
  {
    // Función para asegurarse de que se seleccionase un dos elementos dun grupo de botóns.
    function ComprobarQueHaiEscolla(botons)
    {
      for (i = 0; i < botons.length; i++)
      {
        if (botons[i].checked)
	 return (true);
      }
      return (false);
    }

    // Asegurarse de que o usuario contestou a pregunta sobre a forma de distribución.
    if (!ComprobarQueHaiEscolla(formulario.permiso))
    {
      alert("Debe escoller se permite ou non que contactemos con vostede posteriormente.");
      return (false);
    }

    // Asegurarse de que o usuario escolleu un número de usuarios.
    if (!ComprobarQueHaiEscolla(formulario.usuarios))
    {
      alert("Debe escoller unha das opcións sobre a cantidade de usuarios.");
      return (false);
    }

    // Comprobar que non se escollese o primeiro dos tipos de compañía (non conta como valor).
    if (formulario.tipo.options[0].selected)
    {
      alert("Debe escoller un tipo de compañía da lista.");
      formulario.tipo.focus();
      return (false);
    }

    return (true);
  }

</script>

<!-- [...] -->

<form name="formulario" onsubmit="return VerificarOFormulario(formulario)" action="guión.py" method="post" >

  <!-- Solicitude de permiso para contacto posterior sobre novos produtos. -->
  <p>Danos permiso para contactar con vostede no futuro para informarlle sobre novos produtos que
  poidan resultar do seu interese?<br />
  
    <input type="radio" name="permiso" value="1" />Dóuvolo</input>
    <input type="radio" name="permiso" value="0" />Non</input>

  </p>

  <!-- Solicitude do número de usuarios da rede. -->
  <p>Cantos usuarios ten a súa rede?

    <ul>
      <li><input type="radio" name="usuarios" value="1" />Entre 1 e 5 usuarios.</input></li>
      <li><input type="radio" name="usuarios" value="6" />Entre 6 e 10 usuarios.</input></li>
      <li><input type="radio" name="usuarios" value="11" />Entre 11 e 15 usuarios.</input></li>
      <li><input type="radio" name="usuarios" value="16" />Máis de 15 usuarios.</input></li>
    </ul>

  </p>

  <!-- Solicitude do tipo de compañía. -->
  <p>De que tipo é a súa compañía?<br />

    <select name="tipo">
      <option>(escolla unha opción)</option>
      <option value="software">Compañía de software</option>
      <option value="hardware">Compañía de hardware</option>
      <option value="ambos">Compañía de software e hardware</option>
    </select>

  </p>

  <!-- Botóns de envío ou restablecemento do formulario. -->
  <p>
    <input type="submit" value="Enviar" />
    <input type="reset" value="Borrar"/>
  </p>
</form>

<!-- [...] -->

JavaScript
	Casos concretos de formularios