JQuery Validate: Change error class, replacing another class

Question

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",
        }
    }
} );
}

Could you please guide salesforce.stackexchange.com/questions/177300/… ? — user5778069
– user5778069, Commented Jun 5, 2017 at 14:12

Sparky · Accepted Answer · 2015-03-26 15:08:44Z

Your original code had a few problems.

You misspelled the minlength rule as minLength.
You would not set minlength to true. It gets set to a parameter representing the number of characters. minlength: [2]
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"
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.
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);
        }
    });

});

111 · Accepted Answer · 2015-03-26 11:46:50Z

1

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>

answered Mar 26, 2015 at 11:46

111

1,7791 gold badge13 silver badges15 bronze badges

3 Comments

cfleming93 Over a year ago

Yes, but the desc class is used before as a hint, and I only want it to change if it is an error

111 Over a year ago

I'm not getting what you want

cfleming93 Over a year ago

It needs to take the place of the desc class, and if it is an error come up in red text

Collectives™ on Stack Overflow

JQuery Validate: Change error class, replacing another class

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related