javascript - jquery.validate not showing messages - Stack Overflow

admin管理员组

文章数量:1287596

Can't seem to find out why my jquery.validate script is not showing the messages. Anyone see what I am doing wrong?

Trying to display messages in a separate div:

html:

  <form class="cmxform" id="mentForm" 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() {

$('#mentForm').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

Can't seem to find out why my jquery.validate script is not showing the messages. Anyone see what I am doing wrong?

Trying to display messages in a separate div:

html:

  <form class="cmxform" id="mentForm" 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() {

$('#mentForm').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

• javascript
• jquery

Share Improve this question Follow edited Jan 28, 2014 at 3:43 isaac weathers asked Jan 28, 2014 at 3:31 isaac weathersisaac weathers 1,47255 gold badges2929 silver badges5454 bronze badges 3

• there is no submit button in the form? – Arun P Johny Commented Jan 28, 2014 at 3:35
• missing end qoute here estimatedTaxesAndFees: 'Please enter taxes and fees? – nix Commented Jan 28, 2014 at 3:35
• There is not submit for this form. It is part of a multipart form that updates content in a div. There is no definitive submit. – isaac weathers Commented Jan 28, 2014 at 3:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

1) Include jQuery in your fiddle

2) Add submit button to your HTML:

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

3) Add missing ' at the end of your estimatedTaxesAndFees message:

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

Updated Fiddle

---

You need to add name attribute to your input to get custom message here:

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

Updated Fiddle

you had a unclosed string literal, also in the fiddle jQuery was not included

$(document).ready(function() {

    $('#mentForm').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
        }
    });

});

Demo: Fiddle

The validation will trigger if you clear the contents of a textbox/or you add a submit button to the form/or call the valid() method of the form manually

本文标签： javascriptjqueryvalidate not showing messagesStack Overflow