How do I make multiple highlights in jquery.validation?

Question

I am using jQuery.validator. I finally found an really good answer to adding localstorage capability to jQuery.validator.

Is it possible to write jquery.validate error codes into localstorage?

I using this code now, but I want to use now multiple highlight for more fields at the same time. How do I make more instance of highlight and unhighlight?

I change the name for example I used "highlight2". This not work.

I am using same code as Brahim.

highlight: function(element, errorClass, validClass) {
    // Check for your email input
        if (element.type === "email" && element.name === "input_name") {
        // `errorMap` is an internal Key/value store, where the key refers to the
        // name of an input field, values the message to be displayed for that
        // input.
        localStorage.setItem("email_error", this.errorMap[element.name]);
        }

        // Call the default highlight to keep the original behaviour
        $.validator.defaults.highlight(element, errorClass, validClass);
    },
      unhighlight: function(element, errorClass, validClass) {
        // Check for your email input
        if (element.type === "email" && element.name === "input_name") {
          localStorage.removeItem("email_error");
        }

I want more than one field to show error in localstorage. Sorry for my english.

Answer 1

Unfortunately as of right now jquery.validation does not support multiple independent highlight and unhighlight functions. You can however use a validation script that currently has the capability. If you select parsley http://parsleyjs.org/ you can create multiple events utilizing their 'field:error' and 'field:success' functions. You can do something like;

    $('#id_of_selector_1').parsley().on('field:error', function() {          
        localStorage.setItem('error_1', JSON.stringify(true));
    });
    $('#id_of_selector_1').parsley().on('field:success', function() {          
        localStorage.removeItem('error_1', JSON.stringify(true));
    });   
    $('#id_of_selector_2').parsley().on('field:error', function() {          
        localStorage.setItem('error_2', JSON.stringify(true));
    });
    $('#id_of_selector_2').parsley().on('field:success', function() {         
        localStorage.removeItem('error_2', JSON.stringify(true));
    });

You can call the localstorage item with some kind of boolean function since it has been stringified. I hope that helps you.