javascript - 如何在语义 UI 中提交表单？

Question

我知道如何使用 Semantic UI 验证表单，甚至可以在控制台中读取消息“表单没有验证错误，正在提交。”然而，这是提交到哪里呢？我想实际提交表单，但语义 UI 的布局方式似乎无法指定提交到何处或任何内容。

我读了this tutorial ，但它使用 Angular 进行提交，而不仅仅是语义 UI。

我是否遗漏了一些非常简单的东西？

Answer 1

您可以使用 jQuery 的 ajax:

   //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 ...
   }

编辑:另外，您可以使用表单的 onSuccess 方法来运行 submitForm 函数，即当您初始化表单时:

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

仅当单击“提交”按钮并且表单根据您指定的规则有效时才会调用 onSuccess。

编辑:如果您想要常规的 HTML 表单行为，您需要将语义 css 类添加到 form 标签。

<form class="ui form" method="POST" action="/signup">...</form>

然后您使用 jQuery 设置验证规则。这将为您提供默认的 HTML 表单行为，即当您点击提交按钮时，它将向/signup 发出一个 POST 请求，在上面的例子中。如果您的任何规则触发，提交将被阻止，直到没有验证错误。