2

フォーム検証に関するセマンティック UI ドキュメントによると、手動でエラーを追加できます。

エラー (エラー) を追加 | 配列エラーを指定してフォームにエラーを追加します

(AJAX 経由でフォームを送信し、サーバー側の検証を行い、結果を表示したいので、この機能を使用したいと考えています。)

次のコードを試しました：

$('#my-form').form("add errors", [ 'error' ]);
$('#my-form').form("validate form");

上記のメソッドを呼び出すと、コンソールからこの矛盾した出力が得られます。フォームは、明らかにすべきではない場合でも、成功として検証されます。

ここに画像の説明を入力

何か案が？

4

4 に答える 4

2

AJAX 経由でサーバー側の検証を実行するには、カスタム ルールを使用します。

$myForm = $('.ui.form');
var settings = {
    rules: {
        custom: function () {
            // Perform AJAX validation here
            return false;
        }
    }
};
var rules = {
    ajaxField: {
        identifier: 'ajaxField',
        rules: [{
            type: 'custom',
            prompt: 'Custom error!'
        }]
    }
};
$myForm.form(rules, settings);

これが実際の動作です: http://jsbin.com/sufiwafe/1/edit

一般的なコールバックとフォーム検証の使用方法については、 GitHubのセマンティック UI の問題ページに重要な議論があります。著者は次のように述べています。

...ドキュメントはあいまいでしたが、検証+設定は次のように渡されます$(".form').form(rules, settings);

于 2014-08-06T19:24:47.550 に答える
1

セマンティック UI を使用しているときに、ホイールを再作成しようとしているようです。セマンティック.css の完全なバージョンを head に、セマンティック.js を body 終了タグのすぐ上に含めていると仮定すると、単純な連絡フォームの作業コードの短縮版がここにあり、いくつかのエラー作業はセマンティックによって行われ、いくつかはセマンティックによって行われます。 html5. 完全を期すために、ユーザー側のキャプチャを含めました。HTML

<form class="ui form" name="contact_sdta" action="" method="post">
    <div class="field">
        <label>Your Email </label>
        <div class="ui left labeled icon input">
            <input name="email" id="email" placeholder="name@mail.com" type="email">
            <i class="mail icon"></i>
            <div class="ui corner label">
                <i class="asterisk  red icon"></i>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Subject</label>
        <div class="ui left labeled icon input">
            <input name="subject" id="subject" placeholder="I am interested in more information about" type="text">
            <i class="text file outline icon"></i>
            <div class="ui corner label">
                <i class="asterisk red icon"></i>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Message</label>
        <div class="ui left labeled icon input">
            <textarea name="message"></textarea>
            <i class="text file outline icon"></i>
            <div class="ui corner label">
                <i class="asterisk red icon"></i>
            </div>
        </div>
    </div>
    <div class="ui buttons">
        <input type="reset" value="Cancel" class="ui button">
        <div class="or"></div>
        <input type="submit" value="Submit" class="ui blue submit button">
    </div>
    <div class="ui error message"></div>
</form>

mainjs

    $(function(){
 $('form input[type=reset]')
            .before('<div>Are you a human? <input type="checkbox" name="captcha" /><i class="asterisk red icon"></i></div><br />');
        $('.ui.form').form({
            email: {
                identifier: 'email',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter your email'
                    }
                ]
            },
            subject: {
                identifier: 'subject',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter a subject'
                    }
                ]
            },
            message: {
                identifier: 'message',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Please enter a message'
                    }
                ]
            },
            human: {
                identifier: 'captcha',
                rules: [
                    {
                        type: 'checked',
                        prompt: 'You must behuman'
                    }
                ]
            }
        });
    });

これが問題を解決するのに役立つことを願っています。

于 2014-08-05T17:56:25.773 に答える