Question

我正在使用jQuery验证脚本，但我无法使用errorPlacement向我的div显示验证消息。使用console.log(element);后，我收到undefined错误。

我是HTML工作：

<form id="frmSubmitListing" method="post" action="#">
    <ul id="step1">
        <li>
           <select name="year" id="year" class="selectpicker">
                <option value="">Year</option>
                <option value="2014">2014</option>
                <option value="2013">2013</option>
            </select>
        </li>
    <span id="yearError" class="requ" style="display: none;"></span>
        <input type="button" name="saleBottomStep1" id="saleBottomStep1" value="step1">
    </ul>

    <ul id="step2" style="display: none;">
        <input type="text" name="rooms" value="">
        <span id="roomsError" class="requ" style="display: none;"></span>
        <input type="button" name="saleBottomStep2" id="saleBottomStep2" value="step2" />
    </ul>
</form>

我的验证工作：

$(window).load(function(){
    $(document).ready(function () {
    $('select').selectpicker();
    $("#frmSubmitListing").validate({
        //onkeyup: false,
        //onfocusout: false,
        ignore: [],
        rules: {
        year: {
            required: true
        }
        },
        messages: {
        "year": {
            required: "Required field"
        }
        },
        errorPlacement: function(error, element) {
        if(element.attr("name") == "year") {
            $('#yearError').text(error.text()).show();  
        }
        }
    });
    });

    // Clear validation error
    $("#year").change(function () {
    if ($("#year").valid() == true) {
        $('#yearError').hide();
    }
    });

    //  Submit first step if no error found
    $('#saleBottomStep1').click(function () {
    // If form is valid then move to second step
        if ($("#frmSubmitListing").valid()) {
        $('#step1').hide();
        $('#step2').show();     
        }
    });

    //  Submit second step if no error found
    $('#saleBottomStep2').click(function () {
    // If form is valid then move to third step
    $("input[name*=rooms]").rules( "add", {
        required: true,
        messages: {
        required: "Required field"
        },
        errorPlacement: function(error, element) {
        console.log(element);
        if(this.attr( "name" )== "rooms") {
            $('#roomsError').text(error.text()).show();    
        }
        }
    });
    });
});

我的JSFiddle是：http://jsfiddle.net/8FkA4/53/

我会讨厌如果你支持我来解决这个问题。

由于

Answer 1

问题在于访问标签。请尝试以下（U没有测试）

        if(this.attr( "name" )== "rooms") {
            jQuery('#roomsError').text(error.text()).show();    
        }

Answer 2

您应该在它之前使用jQuery("#formName").validate({。

    jQuery("#formName").validate({


jQuery("input[name*=rooms]").rules( "add", {
            required: true,
            messages: {
                required: "Required field"
            },
            errorPlacement: function(error, element) {
                console.log(element);
                if(this.jQuery.attr("name") == "rooms") {
                    jQuery('#roomsError').text(error.text()).show();    
                }
            }
        });

});

Answer 3

试试这个：

var validate=$("formid").validate({

// Specify the validation rules
    rules:
{
    "rooms": "required"
},


 messages:
{

    "rooms": "Required field"
    },


submitHandler: function(form) {
        form.submit();
    }
});

jQuery验证 - 获取未定义的元素

3 个答案: