-1

このテーマに関する資料はたくさんありますが、それでも私が間違っていることを見つけることができませんでした.

このフォームは、類似したフォームがいくつかあるデータ入力ページの一部です。

エラーがあるときにエラーメッセージを表示することも、データが正常なときにフォームを送信することもありません。ちなみに、検証を含める前に ajax 呼び出しをテストしたところ、正常に動作していました。

http://jsfiddle.net/H5qH8/2/にフィドルがあります。

ここにjsがあります：

$(document).ready(function(){
 $('.subf').click(function(){
var form_id = $(this).parent().attr('id');
var i = form_id.slice(4);
var code = form_id.slice(0,4);
var form_id = "#" + form_id;
var str = $(form_id).serialize();

 $(form_id).validate({
        rules: {
            brand_id: {required: true},
            segment_id: {required: true},
            model: {required: true,maxlength: 25},
            message: {required: true,minlength: 1}
        },
        messages: {brand_id: {required:"Please input brand."},
            segment_id: {required: "Please input segment"},
            model: {required: "Please input model",maxlenght:"Input exceed size=25 characters"},
            message: {required: "What did you want to say?",minlength: "Please complete your thoughts, then submit." }
        },
         errorLabelContainer: "#messageBox",
            wrapper: "li",
        submitHandler: function(form) {
               $(form).ajaxSubmit({
                url: "dataentry2.php",
                type: "POST",
                dataType:"html",
                data: 'code='+code+'&'+str,
                success: function(data){
                    $("#" + code + "_id" + i).html(data);
                    },
                });
        }

    }); 

});
});

そしてHTML：

<form class="display" id="mode9">

<select id="mod_brand" class="models" name="brand_id" value="">
<option value="">Brand</option>
<option value= "8" > BMW </option>
<option value= "16" > Citroen </option>
<option value= "17" > Dacia </option>
<option value= "24" > Ford </option>
......
</select>

<select id="mod_seg" class="models" name="segment_id" value="">
<option value="">Segment</option>
<option value= "1" > mini citadines </option>
<option value= "2" > citadines </option>
<option value= "3" > petits monospaces </option>
....
</select>
<input type="text" class="models" name="model" value=""  />

<button id="submodel9" class="subf" type="button" >Submit </button>
</form>
      <ul id="messageBox">
    <li>    
   error message should go here!!
    </li>
</ul>
4

1 に答える 1

1

clickカスタム コードを保持しながら不要なハンドラーを削除するには、.each()代わりに jQuery を使用します。やり過ぎのように思えるかもしれませんが、同じページに複数のフォームを配置する場合、このプラグインがすべてのフォームで適切に初期化されるためには必須です。

$(document).ready(function () {

    $('.subf').each(function () {
        var form_id = $(this).parent().attr('id');
        var i = form_id.slice(4);
        var code = form_id.slice(0, 4);
        var form_id = "#" + form_id;
        var str = $(form_id).serialize();

        $(form_id).validate({
            rules: {
                brand_id: {
                    required: true
                },
                segment_id: {
                    required: true
                },
                model: {
                    required: true,
                    maxlength: 25
                },
                message: {
                    required: true,
                    minlength: 1
                }
            },
            messages: {
                brand_id: {
                    required: "Please input brand."
                },
                segment_id: {
                    required: "Please input segment"
                },
                model: {
                    required: "Please input model",
                    maxlenght: "Input exceed size=25 characters"
                },
                message: {
                    required: "What did you want to say?",
                    minlength: "Please complete your thoughts, then submit."
                }
            },
            errorLabelContainer: "#messageBox",
            wrapper: "li",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    url: "dataentry2.php",
                    type: "POST",
                    dataType: "html",
                    data: 'code=' + code + '&' + str,
                    success: function (data) {
                        $("#" + code + "_id" + i).html(data);
                    },
                });
            }
        });
    });

});

動作デモ: http://jsfiddle.net/H5qH8/4/

于 2013-08-23T14:23:05.143 に答える