7

jQuery 検証を使用していて、エラー メッセージを div に表示したいと考えています<div class="alert alert-error" id="errorContainer">。フォームの下に表示するデフォルトは、フォーム デザインでは機能しません。

検証スクリプトは、フォームがあるページにリンクされており、次のようになります。

    $(function validate() {

    var rules = {
                rules: {
                    full_name: {
                        minlength: 2,
                        maxlength: 50,
                        required: true
                    },
                    address: {
                        minlength: 5,
                        required: true
                    },
                    city: {
                        minlength: 2,
                        required: true
                    },
                    state: {
                        minlength: 2,
                        maxlength: 2,
                        required: true
                    },
                    zip: {
                        minlength:5, 
                        maxlength:5,
                        required: true
                    },
                    phone: {
                        required: true,
                        phoneUS: true
                    },
                    phone_other: {
                        required: true,
                        phoneUS: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    date_to_start: {
                        required: true
                    },
                    ssn: {
                        required: true,
                        ssn: true,
                    },
                    salary: {
                        required: true
                    }

                }
            };

        var validationObj = $.extend (rules, Application.validationRules);

        $('#employment-application').validate(validationObj);

});

今、私は$('#employment-application').validate(validationObj);以下のコードに変更しようとしただけでなく、フォームを持っているページの下部に追加しようとしましたが、どちらも否定的な結果をもたらしました. スクリプトはに追加style="display:none;"されているようで、errorContainerどこにもエラーをロードしません。

（以下に変更$('#employment-application').validate(validationObj);してみました）

$("#employment-application").validate({
        errorContainer: "#errorContainer", 
        errorLabelContainer: "#errorContainer", 
        errorElement: "li"
    })

要約すると、jQuery Form Validation を使用して、受信したエラー メッセージを別の div に表示したいと考えています。これは、デフォルトではフォーム デザインが機能しないためです。

4

2 に答える 2

5

デフォルトの配置を特定の要素にのみ変更したい場合は、この改善を使用できます。これは、検証スクリプトのデフォルトの動作を実装します

    errorPlacement: function(error, element){
        var name    = $(element).attr("name");
        var $obj    = $("#" + name + "_validate");
        if($obj.length){
            error.appendTo($obj);
        }
        else {
            error.insertAfter(element);
        }
    },
于 2016-01-14T12:37:24.807 に答える