JavaScript/Casos concretos de formularios

En Galilibros, o Wikibooks en galego.
Saltar ata a navegación Saltar á procura
JavaScript
Casos concretos de formularios


Restricións de completado de campos[editar]

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[editar]

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