jquery.validate没有显示消息

时间:2014-01-28 03:31:56

标签: javascript jquery

似乎无法找出我的jquery.validate脚本没有显示消息的原因。有谁看到我做错了什么?

尝试在单独的div中显示消息:

HTML:

  <form class="cmxform" id="commentForm" method="get" action="">
                <label for="vehiclePrice" class="form-control-label vpl">Vehicle Price</label>
                <input type="text" class="form-control" id="vehiclePrice" placeholder="$0" onkeypress="return isNumberKey(event)" value="25592" required />

                <label for="estimatedTaxesAndFees" class="form-control-label etfl">Estimated Taxes and Fees</label>
                <input type="text" class="form-control" id="estimatedTaxesAndFees" placeholder="$0" onkeypress="return isNumberKey(event)" value="2843" required />

              </form>

            <div id="error-note"></div>

JS:

$(document).ready(function() {

$('#commentForm').validate({
    errorLabelContainer: "#error-note",
    wrapper: "li",
    onfocusout: function(element, event) {
        this.element(element);
    },
    rules: {
        vehiclePrice: 'required',
        estimatedTaxesAndFees: 'required'

    },
    messages: {
        vehiclePrice: 'Please enter vehicle price',
        estimatedTaxesAndFees: 'Please enter taxes and fees
    }
});

});

fiddle

2 个答案:

答案 0 :(得分:2)

1)在你的小提琴中加入jQuery

2)在HTML中添加提交按钮:

<input type="submit" value="Submit" />

3)在'消息的末尾添加缺失的estimatedTaxesAndFees

estimatedTaxesAndFees: 'Please enter taxes and fees' // <-- Here

<强> Updated Fiddle


您需要在name添加input属性才能在此处获取自定义消息:

<input type="text" class="form-control" name="vehiclePrice" id="vehiclePrice"
<input type="text" class="form-control" name="estimatedTaxesAndFees"

<强> Updated Fiddle

答案 1 :(得分:1)

你有一个未闭合的字符串文字,也是在小提琴中没有包含jQuery

$(document).ready(function() {

    $('#commentForm').validate({
        errorLabelContainer: "#error-note",
        wrapper: "li",
        onfocusout: function(element, event) {
            this.element(element);
        },
        rules: {
            vehiclePrice: 'required',
            estimatedTaxesAndFees: 'required'

        },
        messages: {
            vehiclePrice: 'Please enter vehicle price',
            estimatedTaxesAndFees: 'Please enter taxes and fees'//closing ' was missing
        }
    });

});

演示:Fiddle

如果您清除文本框的内容/或者向表单添加提交按钮/或手动调用表单的valid()方法,则会触发验证