14

Semantic UIを使用してフォームを検証する方法を知っており、「フォームには検証エラーがありません。送信中です」というメッセージをコンソールで読むことさえできます。しかし、これはどこに提出していますか？実際にフォームを送信したいのですが、セマンティック UI のレイアウトの仕方から、送信先などを指定できないようです。

このチュートリアルを読みましたが、セマンティック UI だけでなく、送信に Angular を使用しています。

ここで本当に単純なものが欠けていますか？

4

8 に答える 8

23

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 要求が行われます。いずれかのルールがトリガーされた場合、検証エラーがなくなるまで送信は阻止されます。

于 2013-11-26T06:58:37.373 に答える
10

Semantic UI has it's own API to submit form. for example:

$('.ui.form .submit.button')
.api({
    url: 'server.php',
    method : 'POST',
    serializeForm: true,
    beforeSend: function(settings) {
    },
    onSuccess: function(data) {
    }
});
于 2015-05-20T04:22:58.317 に答える
4

ajax を使用したくない場合はどうすればよいでしょうか?!

これを使用してください：

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

});

この場合、<button>タグを使用できます...代わりにクラシックタグを使用する必要はありません

于 2014-07-22T09:51:22.713 に答える