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

Question

我知道如何使用语义UI验证表单,甚至可以在控制台中读取消息"表单没有验证错误,提交".但是,这个提交到哪里了？我想实际提交表单,但是语义UI的布局方式我似乎无法指定提交的位置或任何内容.

我阅读了本教程,但是使用Angular进行提交而不仅仅是Semantic 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表单行为,即当您点击提交按钮时,它将在上面的案例中向/注册发出POST请求.如果触发了任何规则,则会阻止提交,直到没有验证错误为止.

Answer 2

使用原始提交按钮但添加语义按钮样式:

<input type="submit" value="Submit" class="ui button" />
<input type="submit" value="Submit" class="ui teal button big"/>

Answer 3

语义UI拥有自己的API来提交表单.例如:

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

Answer 4

最简单的方法是使用下面的代码改进标准HTML表单.

从带有提交按钮的基本工作标准HTML表单开始,这将获取您的值并将它们发布到表单目标,并将输出返回到表单提交按钮下方.

1. 现在是时候仔细检查你是否已成功链接到jquery,语义javascript和语义css.

2. 将class ="ui form"添加到表单标记中.

3. 在下面添加javascript.

.

$(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("<div>Message sent. Thank you.</div>");
    $('.ui.submit.button').after(data);
} 

});

基本形式:

    <form action="process.php" method="post" class="ui form">
    <div class="field">
    <label>title</label>
        <input name="email" type="text">
    </div> 
    <input type="submit" class="ui button"/>
    </form>

如果您希望错误消息显示在框中而不是在表单中显示,请在表单中包含此内容,并删除单词"inline:true",语义UI执行其余操作:

<div class="ui info message"></div>

注意:使用带有语义UI的表单标签并不是绝对必要的,因为您只需要一个带有"ui form"类的div,但是这个改进代码确实需要一个表单标签.