CODEWITHSUNDEEP
jqueryjquery-validate
cfleming93
cfleming93

Reputation: 219

JQuery Validate: Change error class, replacing another class

What I want to do is for the error to take the place of another class in my html, and change to another class for the styling.

e.g. in my HTML I have

<div id="firstname" class="cfield">
    <span>First Name:</span>
    <label><input id="first" name="first" type="text">*</label>
    <span id="firstDesc" class="desc">Only characters</span>
</div>

I want the error message to take the place of the class desc, and then change to class error so the style can change (to red text). Is this possible?

In my JQuery I have:

function checkForm() {
$('#contactform').validate( { 
    errorElement: 'span',
    errorClass: 'desc',
    rules: { 
        first: {
            required: true,
            minLength: true,
        }
    },
    messages: {
        first: {
            required: "You must enter a first name",
            minLength: "Your first name must have more than 2 characters",
        }
    }
} );
}

Upvotes: 0

Views: 13019

Answers (2)

Sparky
Sparky

Reputation: 98738

Your original code had a few problems.

  1. You misspelled the minlength rule as minLength.

  2. You would not set minlength to true. It gets set to a parameter representing the number of characters. minlength: [2]

  3. The custom message gets a placeholder, {0}, which represents, and is automatically replaced by, the parameter you set for the rule. minlength: "Your first name must have more than {0} characters"

  4. You also would not put the .validate() method inside of a function. The .validate() method is only used for initializing the plugin on your form, so it only gets called once on DOM ready.

  5. If you're trying to change your hard-coded span into the error message, then you do not need to change the errorClass. You can leave it as error. Simply use the errorPlacement function to change the content of your hard-coded span into the error message. Using jQuery DOM traversal techniques, the hard-coded span is the next element after the parent element of the input.

    errorPlacement: function(error, element) {
    $(element).parent().next('span').html(error);
}

DEMO: http://jsfiddle.net/48c593kd/

$(document).ready(function () {

    $('#contactform').validate({
        errorElement: 'span',
        rules: {
            first: {
                required: true,
                minlength: [2],
            }
        },
        messages: {
            first: {
                required: "You must enter a first name",
                minlength: "Your first name must have more than {0} characters",
            }
        },
        errorPlacement: function(error, element) {
            $(element).parent().next('span').html(error);
        }
    });

});

Upvotes: 3

111
111

Reputation: 1779

May be you are taking about this kind of validation css change

$(document).ready(function(){
    $("#registerForm").validate({
    errorElement: 'span',
    errorClass: 'desc',
    rules: { 
        name: {
            required: true,
            minlength : 2
        }
    },
    messages: {
        name: {
            required: "You must enter a name",
            minlength: "Your first name must have more than 2 characters",
        }
    }
  });
});
span.desc {
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id='registerForm' name='registerForm' method='post' action='' >   
 <label for="field">Name: </label>
 <input type='text' name='name' id='name' />
    <br/>
 <input type='submit' name='Submit' value='Submit' />

</form>

Upvotes: 1

Related Questions