Question

jQuery验证插件似乎不适用于我的代码。文本字段存在于表单内部的表中。这是一种动态形式。

$('#buttonID').live('click', function(event) {

        $('#formID').validate({
          rules: {
                firstName: "required",
                lastName: "required",
                phoneNum: {
                    required: true,
                    minlength: 10
                },
                pword: {
                    required: true,
                    minlength: 7
                },
                cpword: {
                    required: true,
                    minlength: 7,
                    equalTo: "#pword"
                },
                emailId: {
                    required: true,
                    email: true
                }
            },
            messages: {
                firstName: "Please enter firstname",
                lastName: "Please enter lastname",
                phoneNum: "Please provide a phone number",              
                pword: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 7 characters long"
                },
                cpword: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 7 characters long",
                    equalTo: "Please enter the same password as above"
                },
                emailId: "Please enter a valid email address"
            }

        });

    event.preventDefault();
});

以下是我在按钮点击上创建表单的代码：

function createNewUser(event){
    //clear all the divs
                    if ($("#srchResults").length > 0){                  
                            $('#srchResults').empty();
                    }
        var htmlTable;

                    htmlTable = '<form id="userAttrC">';
                    htmlTable += '<table style="border: 0px; width: 91%;" id="createUserTable" class="rec_filters">';
                    htmlTable += '<tr><td>';
                    htmlTable += '<input type="submit" id="saveUser" class = "buttons" value="Save" >&nbsp;<input type="submit" id="cancelUser" class = "buttons" value="Cancel" >';
                    htmlTable += '</td></tr>';
                    htmlTable += '<tr>';
                    htmlTable += '<td style="width: 30%; vertical-align: top;">';
                    htmlTable += '</td>';
                    htmlTable += '<td style="width: 1%; text-align: center;">';
                    htmlTable += '</td>';
                    htmlTable += '<td style="width: 60%; text-align: left; vertical-align: top;">';

                    htmlTable += '<b>Personal Information</b><br />';
                    htmlTable += '<hr class="d">';
                    htmlTable += '<label for="salutation">Salutation:</label>';
                    htmlTable += '<select id="salutationDD" name="salutation" class="filterselect">';
                    htmlTable += '<option value=""></option>';
                    htmlTable += '<option value="Mr.">Mr.</option>';
                    htmlTable += '<option value="Ms.">Ms.</option>';
                    htmlTable += '<option value="Mrs.">Mrs.</option></select><br />';

                    htmlTable += '<label for="fname">First Name:</label>';
                    htmlTable += '<input type="text" name="fname" id="firstName" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="lname">Last Name:</label>';
                    htmlTable += '<input type="text" name="lname" id="lastName" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="suffix">Name Suffix:</label>';
                    htmlTable += '<input type="text" name="suffix" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="email">Email:</label>';
                    htmlTable += '<input type="text" name="email" id="emailId" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="country">Country:</label>';

                    htmlTable += '<select id="countryDD" name="country" class="filterselect">';

                    //get country list via ajax call
                    $.ajaxSetup({
                        async: false,   
                        "error":function() {   
                            alert("error");
                    }});
                    $.getJSON("<url>", 
                    {
                    countries: "1"
                    },
                    function(data) {

                            htmlTable += '<option value=""></option>';

                            for(var i=1; i<data[0].length; i++){               
                                htmlTable += '<option value="'+data[0][i]+'">'+data[0][i]+'</option>';
                            }
                    });
                    htmlTable += '</select><br />';

                    htmlTable += '<label for="phone">Phone Number:</label>';
                    htmlTable += '<input type="text" name="phone" id="phoneNum" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="ext">Phone Extension:</label>';
                    htmlTable += '<input type="text" name="ext" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="cell">Cell Phone:</label>';
                    htmlTable += '<input type="text" name="cell" class="readOnlyIp" value="" /><br />';

                    htmlTable += '<label for="pwd">Password:</label>';
                    htmlTable += '<input type="text" name="pwd" id="pword" class="readOnlyIp" value="" /><br />';
                    htmlTable += '<label for="cpwd">Confirm Password:</label>';
                    htmlTable += '<input type="text" name="cpwd" id="cpword" class="readOnlyIp" value="" /><br />';
                    htmlTable += '</td></tr>';
                    htmlTable += '</table>';
                    htmlTable += '</form>';

     $('#srchResults').append(htmlTable);       
    event.preventDefault();
}
$("#createUser").click(function(event){ createNewUser(event); });

Answer 1

在按钮上添加验证规则是可以的，特别是如果准备好文档，您的表单尚未存在，而没有看到您的整个页面代码，很难说最好的地方是什么虽然。可能在你的ajax调用的成功处理程序中加载你的表单。

无论如何，重点是，在你的按钮处理程序中，你需要通知告诉表单验证！像这样：

$('#formID').valid();

这就是我常常做的事情：

if($('#formId').valid()){
    //do your form posting logic here
}
else{
   //anything special you want to do with an invalid form

}

编辑：

好吧，在你之后立即放上你的$（＆＃39;＃FormId＆＃39;）。validate（）东西：

$('#srchResults').append(htmlTable);

然后：

 if($('#formId').valid()){
        //do your form posting logic here
    }
    else{
       //anything special you want to do with an invalid form

    }

在这里：

$('#buttonID').live('click', function(event) {

Answer 2

尝试将验证移至文档就绪处理程序：

$(document).ready(function() { $('#formID').validate({...}) });

Answer 3

这不是验证插件的工作方式。您需要在document.ready（）函数中设置验证代码，然后在.form()中调用onClick方法如果您不想要表单，可以使用submit:false选项在任何表格提交活动中验证...

这样的事情：

var _validator;

$(function() {
    _validator = $('#formID').validate({
          onsubmit: false,
          rules: { ... },
          messages: { ... }
    });

    $('#buttonID').click(function(e) {
        e.preventDefault();
        if ( _validator.form() ) {
            // valid form code
        }
    });
});

更新：

在这里运用jsFiddle示例：http://jsfiddle.net/shaneblake/RQMaV/

Answer 4

验证插件使用输入字段的'name'表示

$('#formID').validate({
    rules: {
        firstName: "required"
    }
});

在规则中我们使用输入字段的名称而不是id <input type="text" name="firstName" id="firstName" class="readOnlyIp" value="" /> 所以amke

Answer 5

使用validate()创建验证字段的规则

调用valid()以检查是否符合规则

jquery验证插件无法正常工作

5 个答案: