¿Cómo enviar un formulario en la interfaz de usuario semántica?

Sé cómo validar un formulario utilizando la IU semántica , e incluso puedo leer en la consola el mensaje “El formulario no tiene errores de validación y envío”. Sin embargo, ¿a dónde se está enviando esto? En realidad, quiero enviar el formulario, pero por la forma en que se presenta la interfaz de usuario semántica, parece que no puedo especificar a dónde enviarlo ni nada.

Leí este tutorial , pero usa Angular para enviar y no solo UI semántica.

¿Me estoy perdiendo algo realmente simple aquí?

Puedes usar el ajax de jQuery:

//Get value from an input field function getFieldValue(fieldId) { // 'get field' is part of Semantics form behavior API return $('.ui.form').form('get field', fieldId).val(); } function submitForm() { var formData = { field1: getFieldValue('someId') }; $.ajax({ type: 'POST', url: '/api/someRestEndpoint', data: formData, success: onFormSubmitted }); } // Handle post response function onFormSubmitted(response) { // Do something with response ... } 

EDITAR: también, puede usar el método onSuccess del formulario para ejecutar la función submitForm, es decir, cuando inicializa el formulario:

 $('.ui.form').form(validationRules, { onSuccess: submitForm }); 

onSuccess solo se ejecutará cuando se haga clic en el botón “Enviar” y el formulario sea válido según las reglas que especifique.

EDITAR: si desea el comportamiento de formulario HTML normal, deberá agregar las clases de CSS semánticas a la etiqueta de form .

 
...

Y luego configura las reglas de validación usando jQuery. Esto le dará el comportamiento de formulario HTML predeterminado, es decir, cuando presione el botón de enviar, se realizará una solicitud de POST / registro en el caso anterior. Si se activa alguna de sus reglas, se evita el envío hasta que no haya errores de validación.

use el botón de envío original pero agregue el estilo de botón semántico:

   

La IU semántica tiene su propia API para enviar formularios. por ejemplo:

 $('.ui.form .submit.button') .api({ url: 'server.php', method : 'POST', serializeForm: true, beforeSend: function(settings) { }, onSuccess: function(data) { } }); 

La forma más fácil es actualizar un formulario HTML estándar utilizando el siguiente código.

Comience con un formulario HTML estándar de trabajo básico con un botón de enviar y esto tomará sus valores y los publicará en su destino de formulario, devolviendo el resultado debajo del botón de envío de formulario.

  1. Es un buen momento para comprobar que se está vinculando con éxito a jquery, javascript semántico y css semánticos en este punto.

  2. Agregue class = “ui form” a su etiqueta de formulario.

  3. Agregue el javascript a continuación.

.

 $(document).ready(function() { // validation $('.ui.form').form({ email: { identifier : 'email', rules: [ { type : 'email', prompt : 'Please enter an email' } ] } }, { inline: true, on: 'blur', transition: 'fade down', onSuccess: validationpassed }); // called if correct data added to form function validationpassed() { // Multiple instances may have been bound to the form, only submit one. // This is a workaround and not ideal. // Improvements welcomed. if (window.lock != "locked") { var myform = $('.ui.form'); $.ajax({ type: myform.attr('method'), url: myform.attr('action'), data: myform.serialize(), success: function (data) { //if successful at posting the form via ajax. myformposted(data); window.lock = ""; } }); } window.lock = "locked"; } // stop the form from submitting normally $('.ui.form').submit(function(e){ //e.preventDefault(); usually use this, but below works best here. return false; }); function myformposted(data) { // clear your form and do whatever you want here $('.ui.form').find("input[type=text], textarea").val(""); //$('.ui.submit.button').after("
Message sent. Thank you.
"); $('.ui.submit.button').after(data); } });

Forma básica:

  

Si desea que el mensaje de error se muestre en un recuadro en lugar de dentro del formulario, inclúyalo en su formulario y elimine las palabras “en línea: verdadero”, y la UI semántica hará el rest:

 

NOTA: El uso de tags de formulario con la IU semántica no es estrictamente necesario, ya que solo necesita un div con las clases “formulario ui”, sin embargo, este código de actualización requiere una etiqueta de formulario.

¿Qué pasa si no usas wana ajax?

Usa este:

 $( "#reg_btn" ).click(function(event){ event.preventDefault(); $('#register_form').submit(); }); 

en este caso, puede usar la etiqueta … no es necesario usar la etiqueta clásica en su lugar

La IU semántica se basa en jQuery y CSS, por lo que si quieres enviar los datos de tu formulario, tienes alguna forma de hacerlo:

  1. Envíe sus datos de formulario con AJAX

  2. Use algunos complementos jqQuery como este

  3. ¡Truco!

    Ponga un botón de enviar y configure su pantalla en ninguno. Cuando un usuario hace clic en el botón div tira ese evento al botón de enviar, de esta manera:

     $("div_button_selector").on("click", function(){ $("input[type='submit']").trigger('click'); }); 

Ver publicación ¿ Agregar errores para validar formularios no funciona? para la validación de formularios y errores Dado que la interfaz de usuario semántica es una herramienta del lado del cliente para la interfaz de usuario, este es el php para el correo electrónico de contacto “autoenvío / misma página de códigos”. Dado que el propósito de la IU semántica no es el procesamiento lógico, ¿qué idioma o método desea utilizar para enviar el formulario? JS / jquery cliente o servidor php, Rails, etc.? Tenga en cuenta que la IU semántica depende de jquery.

 < ?php if (isset($_POST["email"])) { if ($_POST["email"] != "") { $from = htmlentities($_POST["email"]); $subject = htmlentities($_POST["subject"]); $message = htmlentities($_POST["message"]); $message = wordwrap($message, 70); mail("valid-server-email-username@valid-server-address", $subject, $message, "From: $from\n"); $_POST["email"] = ""; $_POST["subject"] = ""; $_POST["message"] = ""; unset($GLOBALS['email']); header("location: /"); } } 

Si tienes un formulario como este

 

Tell Us About Yourself

Submit