Easy jQuery Error Message Customization

This code will allow you to customize your jQuery error messages:


Add these links to your page

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js'></script>



You can style your error messages:

<style class="cp-pen-styles">
.error {
color:red;
font-family:verdana, Helvetica;
}
</style>



Your script


<script>
$(function () {
    $('#formTest').validate({
        rules: {
            name: { required: true },
address: { required: true }

        },
        messages: {
            name: { required: 'Please enter your name' },
address: { required: 'Please enter your address' }
        }
    });


});
  </script>

Your form

<form action='test.cfm' id="formTest" name="formTest" method='POST'>
  <input name="name" value="" />
  <input name="address" value="" />
  <input type="submit" class="submit" value="Add Appeal Info">
</form>