Is it frowned upon to modify Jquery Validation for the purpose of achieving a customized style?

Question

Is it frowned upon to modify Jquery Validation for the purpose of achieving a customized style?

When it comes to adding an icon after an input field when a required field is not filled up, my friend and I have different approaches.

My idea is to modify the highlight function in Jquery.Validation by adding a class to the parent element of the input (which happens to be a div) so that I can style it using a pseudo element.

On the other hand, my friend suggests adding a div after the input for styling purposes. He did mention, however, that using HTML elements solely for styling might not be the best practice.

Despite this, he also believes that making modifications to a library is not a good practice either. So, we are left wondering which approach would be more suitable.

jquery html css

Answer 1

Answer №1

Modifying a library is not recommended practice.

However, there are two effective approaches that can be taken. The jQuery validation plugin offers various options to customize behavior, indicating its flexibility and intended functionality.

To apply CSS styling options, define the valid and error classes in your stylesheet:

form.error {
    color: red;
    border: 1px solid red; // for illustration purposes only
}

form.valid {
    color: green;
}

If additional logic such as adding or moving elements is necessary, implement custom actions within the errorPlacement, highlight, and unhighlight functions:

$("form").validate({
    rules: {},
    messages: {},
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass); 
        // add custom actions here
    }, 
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass); 
        // add custom actions here
    }, 
    errorPlacement: function(error, element) {
        var alert = $("<div/>").addClass("alert alert-danger").insertAfter(element); 
        alert.append(error);
    }
});

As stated in the documentation:

errorPlacement determines where error labels are placed.
highlight defines how invalid fields are highlighted.
unhighlight specifies how to revert highlight actions.

Answer 2

Modifying a library is not recommended practice.

However, there are two effective approaches that can be taken. The jQuery validation plugin offers various options to customize behavior, indicating its flexibility and intended functionality.

To apply CSS styling options, define the valid and error classes in your stylesheet:

form.error {
    color: red;
    border: 1px solid red; // for illustration purposes only
}

form.valid {
    color: green;
}

If additional logic such as adding or moving elements is necessary, implement custom actions within the errorPlacement, highlight, and unhighlight functions:

$("form").validate({
    rules: {},
    messages: {},
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass); 
        // add custom actions here
    }, 
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass); 
        // add custom actions here
    }, 
    errorPlacement: function(error, element) {
        var alert = $("<div/>").addClass("alert alert-danger").insertAfter(element); 
        alert.append(error);
    }
});

As stated in the documentation:

errorPlacement determines where error labels are placed.
highlight defines how invalid fields are highlighted.
unhighlight specifies how to revert highlight actions.

Is it frowned upon to modify Jquery Validation for the purpose of achieving a customized style?

Answer №1

Similar questions

Adjust the HTML Canvas to cover the entire screen

Columns with adjustable widths

The properties of the box model applied to unidentified inline boxes

Open Chrome in fullscreen mode directly from your Android home screen without the statusbar displayed

Quickest method to create a new empty stylesheet in the developer tool of Chrome's inspector ("Inspector stylesheet")

Making a standard AJAX request using jQuery without including the XHR header

The margin in the DIV is not aligning correctly with the specified requirements

Monitoring the modifications of a linked component in React: A guide

Using jQuery to retrieve the text content of child elements

Is it possible to use Prettier in ESLint for formatting Markdown and CSS files?

I'm looking to extract information from a webpage using Python by inputting specific criteria

Tips for initializing a jstree with no content?

Rails New Action fails to render HTML during AJAX GET request

Incorporating a View into a Sidebar in CakePHP

What is the process for altering the active color of a materialize icon?

Is it possible to create this layout using Bootstrap 5? I want to stack spans, with one inside the container and one outside

How can I make the hover effect only apply to the text and not the entire box?

Issue with the width on Mobile Safari

Using checkboxes to select all in AngularJS

Creating CSS wrappers around div elements of varying sizes