Using Selectric Js with Jquery Validator Js

I have using normal form. And I want to change the select box style. So I have found Selectric Js Plugin javascript.

And I thought that the validation of the form will happen in the client side means that will looks much easier. So I have downloaded Jquery Validator Plugin. Both are working fine.

After that I have found a problem with form validation. When I try to use selectric js with jquery validator means the selectric will hide the default selectbox. So the error message of the select box won’t appear in the frond end. I have searched through the internet. And I have found an solution from selectric issues page.

Here is the Selectric Issue 32. In that lcdsantos has give a solution for the problem.

Here is the solution I got.

$('form').validate({
    ignore: ':hidden:not(select)',
    errorPlacement: function(error, element) {
        // check if element has Selectric initialized on it
        var data = element.data('selectric');
        error.appendTo( data ? element.closest( '.' + data.classes.wrapper ).parent() : element.parent() );
    },
    name: {
      required: true,
    },
    email: {
      required: true,
      email: true
    },
    country: {
      required: true
    }
});

Wow, This will get the error for the select box.

This will trigger manual error placement and place the error after the selectric list box.

But this also has problem. The problem is when we change the selectric box value the error is not hiding. After searching related this problem I have found another solution.

The solution is,
jQuery Selectric (select replacement) validation.

In this solution Sparky saying that to write a custom handler that will trigger validation on the hidden element programmatically whenever its value changes.

(e.g)

$('select[name="mySelect"]').on('change', function() { // fires when the value changes
    $(this).valid(); // trigger validation on hidden select
});

So the final solution would be like this

$('form').validate({
    ignore: ':hidden:not(select)',
    errorPlacement: function(error, element) {
        // check if element has Selectric initialized on it
        var data = element.data('selectric');
        error.appendTo( data ? element.closest( '.' + data.classes.wrapper ).parent() : element.parent() );
    },
    name: {
      required: true,
    },
    email: {
      required: true,
      email: true
    },
    country: {
      required: true
    }
});
$('select[name="country"]').on('change', function() { // fires when the value changes
    $(this).valid(); // trigger validation on hidden select
});

Now my code working fine. 🙂

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s