Question

How do I change the validation message when I’m using jQuery validation on a single element.

In the example below I’m just trying to validate the “DestinationId” select list, when the button is clicked.

$(".process").click(function () {
    return $("form[action$='process']").validate({
        rules: {
            DestinationId: "required"
        },
        messages: {
            DestinationId: "Please provide the destination"
        }
    }).element("#DestinationId");
});

Here is the rendered HTML of the select element:

<select class="required" id="DestinationId" name="DestinationId"
   <option value="">Select Destination</option>
   <option value="3">Europe</option>
   <option value="4">USA</option>
</select>

Yet the message appearing is just: “This field is required”.

Where am I going wrong?

Answer 1

Refer LIVE DEMO

I tried this way and working fine as expected. Check are you tried in different way.

HTML:

<form action="process">
    <select class="required" id="DestinationId" name="DestinationId">
        <option value="">Select Destination</option>    
        <option value="3">Europe</option>    
        <option value="4">USA</option> 
    </select><br/>
    <button class="process">Submit</button>
</form>

JQuery:

$(".process").click(function () {     
    return $("form[action$='process']").validate({         
        rules: {             
            DestinationId: "required"         
        },         
        messages: {             
            DestinationId: "Please provide the destination"         
        }     
    }).element("#DestinationId"); 
});

EDIT:

As @Jasper Mogg mentioned, it might be issue with not closing the select tag.

Replace this line

<select class="required" id="DestinationId" name="DestinationId"

to this

<select class="required" id="DestinationId" name="DestinationId">