1

estoy desarrollando un formulario en vue, pero cuando llamo a mi componente me dice que el formulario no esta conectado: Form submission canceled because the form is not connected

Mi formulario es el siguiente:

<template>
    <div class="mt-40 grid grid-cols-5 gap-4 content-end">
      <div></div>
      <div></div>
      <form @ref="form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-80">
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
            Username
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="user" type="text" placeholder="Username" v-model="nombre">
        </div>
        <div class="mb-6">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
            Password
          </label>
          <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="passw0rd" type="password" placeholder="******************" v-model="contraseña"> 
          <p class="text-red-500 text-xs italic">Please choose a password.</p>
        </div>
        <label class="block text-gray-700 text-sm font-bold mb-2" for="nivel">
            Nivel <select v-model="niveles">
      <option v-for="nivel in niveles" :key="nivel">
        {{ nivel}}
      </option>
    </select>
</label>
<br>
        <div class="flex items-center justify-between">
          <button id="btnRegistro" @click="enviarRegistro()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
            Register
            </button>
        </div>
      </form>
      </div>
    </template>

Y tengo una función submit que se envia cuando se hace un submit en el formulario mediante el botón que tiene el tipo submit:

El botón:

<button id="btnRegistro" @click="enviarRegistro()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
            Register
            </button>

La función:

 const submit = ()=>{
      this.$refs.form.$el.submit()
    }
6
  • Por si sea relevante.
    – padaleiana
    Commented el 16 dic. 2022 a las 11:28
  • ¿A qué te refieres con eso?
    – cucalondev
    Commented el 16 dic. 2022 a las 11:59
  • Pregunto... En lugar de tener una función "click" en el botón de submit, ¿no debería acaso invocarlo en el form? En Vue: <form @submit.prevent="<la_función_en_cuestión>">. (De verdad la pregunta, puede que sea un método distinto nada más)
    – padaleiana
    Commented el 16 dic. 2022 a las 12:23
  • El caso es que tengo dos submits
    – cucalondev
    Commented el 16 dic. 2022 a las 12:50
  • Probablemente ese otro botón no está dentro de un formulario, es por eso que ese mensaje aparece (y ahí es donde entra el mensaje del estándar al que hice referencia en mi primer comentario, solo que el appendChild no aplica en este caso).
    – padaleiana
    Commented el 16 dic. 2022 a las 12:54

1 respuesta 1

0

Lo arreglé el caso es que el formulario de Login que llamaba al formulario de Registro, tenía dos inputs de submit, y uno de ellos simplemente llamaba a un componente, pero no enviaba ningún dato, por lo que cambié el tipo de botón de "submit" a "button" y ahora no devuelve mensajes de error!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.