-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处理程序又保留您的自定义代码，请改用 jQuery .each()。这可能看起来有点矫枉过正，但如果您要在同一页面上有多个表单，则必须强制此插件在所有表单上正确初始化。

$(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 回答