CODEWITHSUNDEEP
jqueryvalidation
user3932627
user3932627

Reputation:

JQuery Validation plugin tweaking

Is it possible to not have a message appear next to a missing field, but instead set a css rule to change the background colour of the field?

I tried looking, and Im sorry that I have nothing to prove (for all the really hardcore SO users with triggerhappy downvote fingers), but I could not find anything.

My form is really tight and if the message appears then if throws out the architecture whole form.

Bollow is what I have in place now. Ant it works like I said, but I would like to replace the messages with color.

Validation Rules

    var addStoreValidator; //scope - to reset form
    /* add new store to database */
    $('#addEditSave').click(function(){
        addStoreValidator = $("#storeEditFrm").validate({
            rules: {
                    "store_name": "required",
                    "street_name": "required",
                    "city_name": "required",
                    "province_name": "required",
                    "country_name": "required",
                    "phone": "required",
                    "store_email": {
                        required: true,
                        email: true
                    },
                    "ip_address": {
                        required: true,
                        ipv4: true
                    }
                },
                messages: {

                }
        });

If the Form is Valid:

        if ($("#storeEditFrm").valid()){
            $.ajax({
                type: "POST",
                url: './inc/storeScripts.php?argument=addStore',
                data: { name: $("#store_name").val(),
                        street: $("#street_name").val(),
                        suburb: $("#suburb_name").val(),
                        city: $("#city_name").val(),
                        province: $("#province_name").val(),
                        country: $("#country_name").val(),
                        phone: $("#phone").val(),
                        email: $("#store_email").val(),
                        fax: $("#fax").val(),
                        ip_address: $("#ip_address").val()
                },
                dataType: "json"
            })

Upvotes: 1

Views: 61

Answers (3)

Sakai
Sakai

Reputation: 637

In my experience you type of code works, but i like to work with custom JS class in this type of "plugins", here follow a class that is used on Magento Community and it uses prototype, but you could easily change to jQuery.

https://github.com/magento/magento2/blob/master/lib/web/varien/form.js

Hope it helps, this class is really well made, you can follow it that your work will be more extensible than you could ever imagine.

Upvotes: -1

Noy
Noy

Reputation: 1268

Yes, you could use the change the invalidHandler and use the invalidHandler to update the css (jquery validate options) :

$(".selector").validate({
    errorPlacement: function(error,element) {
        return true;
    },
    invalidHandler: function(event, validator) {
        $.each(errorList, function() {
            // update css value for element
        }
    }
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Not an expert in validator, but you can do something like

input.myerror {
    border: 1px solid red;
}

then

var validator = $('#form').validate({
    rules: {
        x: {
            required: true
        }
    },
    messages: {},
    errorPlacement: function (error, element) {},
    highlight: function (element, errorClass, validClass) {
        $(element).addClass('myerror')
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('myerror')
    }
});

Demo: Fiddle

Upvotes: 2

Related Questions