A guide to creating custom form controls with validation using pseudocode in Bootstrap

I am working with a Bootstrap form and I want to display a green check mark in the input box when both the required fields are filled and they match my specified pattern.

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: var(--bs-success);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

Here is a link to my complete code for reference:

How can I customize it to match my specific pattern?

javascriptcssbootstrap-5

Answer №1

To improve the functionality of your form, some adjustments are necessary in both your HTML and CSS code.

Start by including the .form-control-custom class to your #GWTci input field:

<input required class="form-control form-control-custom" type="text" name="" id="GWTci" class="form-inline">

Then, modify the following CSS rules as follows:

.form-control-custom.is-valid,
.was-validated .form-control-custom:valid {
    border-color: var(--bs-success);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control-custom.is-invalid,
.was-validated .form-control-custom:invalid {
    border-color: var(--bs-danger);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

The updated code should look like this:

.was-validated .form-control-custom.valid {
    border-color: var(--bs-success) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}
.was-validated .form-control-custom.invalid {
    border-color: var(--bs-danger) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

Please note:

  • The .form-control-custom.is-valid class has been removed from both sets of rules
  • Rather than using the :valid / :invalid pseudoselectors for the .form-control-custom class, the classes .valid and .invalid are now targeted because they're introduced by your Javascript
  • By adding !important, you enforce the rules. While not ideal, it is a temporary solution. Consider increasing specificity or adding additional classes or attributes to avoid issues in the future.

Your IP matching RegEx appears to be functioning correctly. Combined with the HTML and CSS changes, these updates will:

  • Show a green tick upon successful form submission
  • Display an exclamation mark if the input is invalid (due to regex failure or empty required fields)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to reset form after submission in Next.js?

I have a contact form and I want all the form values to be cleared after submitting the form. I've tried the following code, but the values of the form remain unchanged after submission. What could be causing this issue and how can it be resolved? ...

javascripthtmlreactjsnext.js

Using VueJS transitions may require the use of setTimeout for them to work

My code successfully slides out a menu: Vue.set(this.filterStyles, filterIndex, { display: "block", height: "auto", }); let filterValuesElHeight; Vue.nextTick().then(() => { let filterValuesEl = document ...

javascriptcssvue.jscss-transitions

The dataTable plugin is malfunctioning, displaying all records on a single page when it should only show 10 per page

I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...

javascriptphpjqueryhtmlcss

Tips for positioning an image, text, and button horizontally without resorting to tables

Does anyone know how to align a movie poster image, description text, and add to cart button on the same line? The text must be centered aligned without wrapping around the button or image, just like in this example. https://i.sstatic.net/yQaCl.png Curre ...

htmlcss

Tips for effectively incorporating additional directives into a directive as it is being defined

I'm encountering a significant issue with dynamic directives in angularjs. My goal is to include new directives to a directive while defining it through an object: compile: function () { return { pre: function (scope, iElement, iAttrs) { ...

javascriptangularjs

Deciphering the mechanics of collection referencing in mongoose

Today, I am delving into the world of using references in mongoose for the first time. I am trying to figure out how to save a template with a user ID. Do we need to retrieve the createdBy value from the client, or can it be inserted into the templateSchem ...

javascriptnode.jsmongodbmongoose

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements: All cards must be contained within a single class="row" div. This is because the number of cards is unknown and I want the layout to adjust well acr ...

cssheightbootstrap-4marginbootstrap-grid

Using PHP to ascertain the requested dataType or responseType from the client

My ajax request is fairly simple: $.post('server.php',data, function (json) {console.log(json)},'json'); I have configured jQuery to expect json data based on the dataType setting. Question: Is the dataType parameter equivalent to re ...

javascriptphpjqueryajaxhttp-headers

Ways to completely eliminate a global component in VueJS

I have a unique component named button-widget that has been globally registered. Vue.component('button-widget', { template: `<button>My Button</button>` }) Now, I am wondering how I can permanently delete this component. I do ...

javascriptvue.jsvue-component

including identical item in the array

<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <script> var app = angul ...

javascriptangularjs

What is the best way to display service data as soon as it is received using $http, without relying on angular.copy?

My challenge is with a service that is supposed to store specific data loaded from a JSON file and display it on the webpage immediately upon receiving. I attempted to set a $scope variable equal to the data in the service, but the data did not show up rig ...

javascriptangularjspromise

What is the process for removing a specific row from a datatable?

I have implemented a data-table using Vue and Vuetify. When I click on the delete icon in a specific row, a snackbar pops up with two buttons - yes and no. If I click on the yes button, I want to delete that specific row. How can I achieve this functionali ...

javascriptvue.jsvuejs2vuetify.js

Retrieve all documents from PouchDB that match a specific regex pattern by their IDs

Is there a way to retrieve all documents with IDs that match a specific regex expression? Let's say we have the following document IDs: p0 p0/e0 p1 p1/e0 How do we only retrieve p0 and p1? Using the regex /^p[0-9]+$/. Currently, it takes two reque ...

javascriptpouchdb

What could be causing certain text to vanish (become invisible) when viewed on a mobile device?

How can I make sure all text is visible on a mobile device? I need the text to display in full size when testing on a mobile device. How do I achieve this? <html> <head> <meta content="width=device-width,initial-scale=1,minimum-scale ...

cssviewportresponsive

Having trouble submitting ajax form data through nodemailer

Hey there, Recently, I created a web app using node.js and express. Everything seems to be working fine except for one issue - I am struggling to get the JSON data sent by AJAX into Nodemailer. Despite confirming that my AJAX is successfully sending the ...

javascriptjquerynode.jsajaxexpress

Checking the status of an Xmlhttp request when the URL is inaccessible, all without the use of libraries

I am currently working on testing the functionality of a given URL using Ajax. In order to achieve this, I made some modifications to the Ajax code. function checkURLStatus() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Ch ...

javascriptajaxxmlhttprequest

Oops! There seems to be an issue with an invalid character in the literal true value while making a POST request to the API with JSON data. The expected character should be

Can anyone help me solve an issue I am facing while trying to use the POST method to insert data using JSON in JS code? When I attempt the transformation, I receive an error message stating: "ERROR: invalid character ' ' in literal true (e ...

javascriptjsonpostpentaho

Here is a unique rewrite of the text: "Discover how to efficiently sort through a JSON file using AngularJS. By

Seeking to implement a search feature using angularjs that filters results based on Name and Door-No. Once the filter is applied, a list of filtered Names should be displayed, with details shown upon clicking each name. See below for the code snippet: JSO ...

javascriptjqueryangularjsjson

Can PDO prepared statements provide sufficient protection against SQL injection?

Is relying solely on PDO prepared statements enough to secure against MySQL-related security risks, or is it necessary to also perform server-side character validation? I am currently using PDO prepared statements and client-side JavaScript form checking, ...

javascriptphpmysqlpdo

Utilize AJAX and JavaScript to retrieve file information and facilitate file downloads

I have developed a script that intercepts Captcha form submissions. Typically, when the form is submitted, a file will be downloaded (such as exe or zip) in the usual way where it appears at the bottom of the Chrome browser and gets stored in the "download ...

javascriptajax