0
300
Vistas¿Cómo validar elementos HTML al enviar a través de JQuery?
Tengo un formulario HTML como se muestra a continuación con algunos campos de formulario y un botón de envío y eliminación:
También hay un componente flotante que aparece cada vez que hay cambios en el formulario como se muestra en el mismo diagrama con texto: You have unsaved changes. Este es un componente común que aparece en todos los formularios de mi sitio web.
Cuando envío el formulario usando el botón Enviar del formulario, valida todos los campos según las validaciones.
(por ejemplo: <input type="number" min="0"> verificará que el número sea positivo)
Pero si envío el formulario desde el botón Guardar en el elemento flotante, no verifica ninguna validación y solo publica la solicitud.
Intenté usar el siguiente código, pero la función reportValidity() no hace nada.
if (!form.checkValidity()) { form.reportValidity(); } form.checkValidity() y form.reportValidity() ambos devuelven falso cuando hago un console.log.
¿Qué me estoy perdiendo aquí y cómo puedo solucionarlo?
PD Probé esto en Chrome v98.
Editar: Agregar código HTML:
<form method="post" action="/products/manage/{{.Product.ID}}/submit/"> <div class="form-group col-md-5"> <label>Product Quantity</label> <input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}"> </div> <button type="submit" class="btn btn-success" value="Submit">Submit</button> <button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button> </form>El botón Guardar llama a esta función:
function submitForm(form, url) { const form = $(form)[0] if (!form.checkValidity()) { //<- Added the code here form.reportValidity(); } var serialized = serializeForm(form); // Do some more things then use HTTP to request the API }1 Respuestas
Responde la pregunta0
Puede usar fácilmente los controladores de eventos de jQuery para que hagan el trabajo por usted. Un ejemplo simplificado a continuación:
Dale a tu formulario algún identificador (ejemplo: id="form1")
Atrapa el evento de clic al hacer clic en el botón
Activar el evento de envío para enviar ese formulario
$('.unsavedChangesBtn').on('click',function(){ $('#form1').submit(); });
En el siguiente ejemplo, puede enviar el formulario haciendo clic en el botón Enviar o en el botón Guardar.
$('document').ready(function(){ $('#form1').on('submit',function(){ alert("SUBMITTED"); }); $('.unsavedChangesBtn').on('click',function(){ $('#form1').submit(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" id="form1" action="javascript:void(0);"> <div class="form-group col-md-5"> <label>Product Quantity</label> <input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}"> </div> <button type="submit" class="btn btn-success" value="Submit">Submit</button> <button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button> </form> <button class="unsavedChangesBtn"> SAVE </button>