Question

这个主题有很多材料，但我仍然无法找到我做错的事。

此表单是具有多种类似表单的数据输入页面的一部分。

当出现错误时既没有显示错误消息，也没有在数据正常时提交表单。顺便说一句，我在包含验证之前测试了ajax调用，并且它（正常）工作正常。

这是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>

Answer 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/

jquery表单验证不会抛出错误或提交

1 个答案: