Updating form validation: relocating error messages

When using a jQuery form validation script, an "OK!" message is typically displayed below the input field when the input is correct. However, I would like to customize this behavior and have the "OK!" message appear on the right side of the field instead (while keeping the error messages under the field), similar to the layout shown in the image below:

https://i.sstatic.net/E3ApK.jpg

If you want to see a working example, you can check out this fiddle: https://jsfiddle.net/q7nub2v4/1/

Additionally, here's the corresponding HTML code snippet:


    <!DOCTYPE html>
    <html lang="fr">
    <head>

    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.min.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>

    </head>

    <form id="registration-form" action="#" method="POST">

    <div class="col-sm-5"> 
        <div class="control-group has-feedback">
            <label class="control-label" for="username">Username</label>
            <div class="controls">
            <input type="text" name="username" id="username" class="form-control" placeholder="user"/>
            </div>
        </div>

        <div class="control-group has-feedback">
            <label class="control-label" for="email">Email</label>
            <div class="controls">
            <input type="text" name="email" id="email" class="form-control" placeholder="email"/>
            </div>
        </div>

        <div class="control-group has-feedback">
            <label class="control-label" for="password">Password</label>
            <div class="controls">
            <input type="password" name="password" id="password" class="form-control" placeholder="pass"/>
            </div>

        </div>

        <br>

        <button type="submit" class="btn btn-primary">submit</button>

     </div>

    </form>


    <script>

    $(document).ready(function () {

        $('#registration-form').validate({
            rules: {
                username: {
                    rangelength: [6, 16], 
                    pattern:/^[a-zA-Z0-9_-]+$/,
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                password: {
                    rangelength: [8, 12],
                    required: true,

                }

            },

            highlight: function (element) {
                $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('has-error').addClass('has-success');
            }
         });

    });

    </script>
javascriptjqueryhtmlcss

Answer №1

To create some space on the right-hand side, consider adjusting the input width to 90% and changing the display of the input box to "inline-block".

input[type=text], input[type=password] {  
width: 90%;
display: inline-block;
margin-right: 5px;
}

Live example

Answer №2

To customize the form-control class in Bootstrap, simply overwrite it with your own CSS rules.

.controls input.form-control{
    width: 90%;
    display: inline-block;
    margin-right: 5px;
}

Check out this live example on JSFiddle

Answer №3

It seems like this is the solution you are looking for.

Check out the jsFiddle


<form id="registration-form" action="#" method="POST">

  <div class="col-sm-5"> 
    <div class="control-group has-feedback">
        <label class="control-label" for="username">Username</label>
        <div class="controls">
        <div class="col-xs-11">
        <input type="text" name="username" id="username" class="form-control" placeholder="user"/>          
        </div>
        <div class="col-xs-1 success-msg"></div>
        <div class="clearfix"></div>
        </div>
    </div>

    <div class="control-group has-feedback">
        <label class="control-label" for="email">Email</label>
        <div class="controls">
        <div class="col-xs-11">        
        <input type="text" name="email" id="email" class="form-control" placeholder="email"/>
        </div>
        <div class="col-xs-1 success-msg"></div>
        <div class="clearfix"></div>

        </div>
    </div>

    <div class="control-group has-feedback">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
        <div class="col-xs-11">
        <input type="password" name="password" id="password" class="form-control" placeholder="pass"/>
        </div>
        <div class="col-xs-1 success-msg"></div>
        <div class="clearfix"></div>

        </div>

    </div>

    <br>

    <button type="submit" class="btn btn-primary">Submit</button>

</div>

</form>

And here is the accompanying Javascript code:

$(document).ready(function () {

    $('#registration-form').validate({
        rules: {
            username: {
                rangelength: [6, 16], 
                pattern:/^[a-zA-Z0-9_-]+$/,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            password: {
                rangelength: [8, 12],
                required: true,

            }

        },

        highlight: function (element) {
            $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
        },
        success: function (element) {
            element.parent().next().text('OK!').addClass('valid')
                .closest('.control-group').removeClass('has-error').addClass('has-success');
        }
    });

});

Answer №4

use it...........



  <!DOCTYPE html>
    <html lang="fr">
    <head>

    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.min.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>
<style>
.error
{
    display: inline-block;
    float: left;
    width: 109px;
    font-size: 11px;
    line-height: 10px;
    padding: 0px 5px 5px;
}
.controls input
{
    display:inline-block;
    float:left;
    width:auto;
}
.has-feedback
{
    display:block;
    clear:both;
}
.has-feedback .form-control
{
    padding-right:0px;
}
.cutom-btn
{
    display:block;
    clear:both;
    padding:15px 0px;
}
</style>
    </head>

    <form id="registration-form" action="#" method="POST">

    <div class="col-sm-5"> 
        <div class="control-group has-feedback">
            <label class="control-label" for="username">Username</label>
            <div class="controls">
            <input type="text" name="username" id="username" class="form-control" placeholder="user"/>
            </div>
        </div>

        <div class="control-group has-feedback">
            <label class="control-label" for="email">Email</label>
            <div class="controls">
            <input type="text" name="email" id="email" class="form-control" placeholder="email"/>
            </div>
        </div>

        <div class="control-group has-feedback">
            <label class="control-label" for="password">Password</label>
            <div class="controls">
            <input type="password" name="password" id="password" class="form-control" placeholder="pass"/>
            </div>

        </div>

        <br>
<div  class="cutom-btn">
        <button type="submit" class="btn btn-primary">submit</button>
        </div>

     </div>

    </form>


    <script>

    $(document).ready(function () {

        $('#registration-form').validate({
            rules: {
                username: {
                    rangelength: [6, 16], 
                    pattern:/^[a-zA-Z0-9_-]+$/,
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                password: {
                    rangelength: [8, 12],
                    required: true,

                }

            },

            highlight: function (element) {
                $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('has-error').addClass('has-success');
            }
         });

    });

    </script>

Answer №5

Introducing a new CSS class named reStyle:

<label class="error valid reStyle" for="email" id="email-error">OK!</label>

To implement this style, include the following lines in your CSS:

.valid {float: right;}
.reStyle{position: relative; top: -30px; right: -30px;}

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

How to use jQuery to dynamically set the selected attribute on an option element

Is there a way to specifically set Ubuntu as the selected option in the following select box? Here's what I've attempted: <select> <option value="val1">Val 1</option> <option value="val2">Val 2</option> <option v ...

jquery

Switch the position of the tab from the left side of the page to the right side

I currently have a tab positioned on the left side of my screen, but I am now looking to move it to the right side and adjust its vertical positioning. Below is the code that places the tab on the left side: CSS #feedback { position: fixed; ...

htmlcsstwitter-bootstrap

What is causing the issue with the "Inline-block" property in this CSS code?

Please review the CSS code provided below for styling instructions. /*rex is the container of ex,ex2,ex3*/ div.rex{ height:200px; border:0px; margin:60px auto; padding: 0; vertical-align:top; } div.ex{ width:34%; height:200px; background-color:#4f443a; ...

htmlcss

Unable to retrieve the value of a textbox located within a gridview

In my grid view, I have a textbox nested inside a TemplateField. I want to retrieve the value of this textbox when a button is clicked: This is where I create the textbox: <ItemTemplate> <asp:TextBox runat="server" ID="txtEmail" Text=&a ...

javascriptjquerygridviewtextbox

Preventing JQuery spinner from resetting the value based on the set step size

Is it possible to set the jQuery spinner to increment by 5 but start at an initial value of 1, then proceed with increments of 5 (resulting in values such as 6, 11, and so on)? Currently, when I define a step of 5, the spinner seems to ignore the initial v ...

jqueryjquery-uispinnerjquery-ui-spinner

search function to lookup database records based on specified keywords

Currently attempting to implement a feature that enables searching a MySQL database for keywords using JavaScript. Running into some challenges with executing commands in JS and how to incorporate the keywords from an input box into the MySQL query. <h ...

javascriptmysqlnode.js

The Render function in ReactJS is not getting refreshed

My goal is to implement a chat feature using material UI. I have set up a function where users can submit new chat messages, which then go through the reducer and are stored in the redux store. The process seems to be working fine, except for the fact that ...

javascriptreactjsreact-reduxmaterial-ui

What is the best way to remove an object element by index within AngularJS?

One of my challenges involves dealing with objects, specifically $scope.formData = {} I am trying to figure out how to remove an element from the object using the index $index: $scope.formData.university[$index]; My attempt was: $scope.formData.univer ...

javascriptangularjs

What is the most efficient way to apply a class to the post div every 4 seconds using jQuery?

What is the most effective method to dynamically add a class to each div element with a class of "post" every 4 seconds using jQuery? <div class="34 post"> <img width="311" height="417" src="#" class="#" alt="newspapers" /> <h2><a hre ...

javascriptjquery

Adjust the color of the IconButton

I am trying to customize the color of an IconButton by setting it to red <IconButton variant='contained'> <StarBorderRoundedIcon color='red' /> </IconButton> However, when I try this, the red color ...

htmlreactjssvgmaterial-uiicons

Ways to toggle the visibility of a DIV element with a radio button click

Initially, the both DIV's are set to be hidden. When a radio button is selected, the corresponding DIV should be displayed based on its #ID. The code snippet I have written: <input type="radio" name='thing' value='valuable' id ...

jqueryradio-button

Unable to extract data from my xml reply

I've been trying to extract a value from an XML response, but I keep getting null. What am I missing? $.ajax({ method: "GET", url: "fphub01-prd.tc.workstreaminc.com/hub/custLookup/", data: { emailAddress: email } }).done(function(msg) { ...

jqueryajaxxml

Modify the color of the ion range-slider handle

When attempting to change the default color of ion range-slider (available at: https://github.com/IonDen/ion.rangeSlider) from red (default) to blue using the following code: .irs-slider.single { background: blue; } The slider shape changes from a th ...

cssrangesliderion-range-slider

Issues with Vue.js table component functionality

I have created a table where each tbody item is a component structured like this: <div class="panel"> <table class="table"> <thead> <tr> <th>Door</th> <th>Van</th> ...

htmllaravel-5vue.js

"HTML Form Input Configuration Bug: Multiple Selection Fails to Return

I am currently working on a web application using express, and I am trying to create a form for adding a new product. Within this form, I have implemented a multi-select feature for choosing the categories associated with the product. Below is the code sni ...

htmlnode.jsexpress

Is there a way to modify CSS class names on-the-fly within an Angular project?

I am working with two CSS classes named as below: .icon_heart{ color: #bdbdbd; } .icon_heart_red{ color: #a6b7d4;; } Within my HTML code, I have incorporated a heart icon. <div class="icon_heart" *ngIf="showheartIcon"> ...

htmlcssangularionic2

Troubleshooting the encryption of XSSFWorkbook in styles.xml during the save process with Apache POI v3.16

Currently, I am using Apache POI 3.16 with Java version 1.7.0-251 (Unix). I found inspiration in an example provided by @Aniruddh Chandegra on how to create and edit a password-protected excel sheet using Apache POI 3.14 (Link here). [EDIT - Below is the ...

javascriptexcelapache-poi

What is the best way to calculate the total sum of multiple arrays inside an array of objects?

I need help figuring out how to calculate the sum of multiple arrays within an array of objects. Here's the code I have: const employeeList = [ { "name": "Ahmed", "scores": [ "5", "1", "4", ...

javascriptarraysjsonfor-loopsum

Achieving 100% height in a div container using flex while maintaining vertical centering

Struggling to center text and buttons using flexbox while keeping the columns equal? Setting column height as 100% can be a challenge. If you set the height to 100%, vertical alignment may no longer be centered. Avoid resorting to tables or JavaScript for ...

htmlcssflexbox

Error: The element 'scrollable' is not recognized in Angular2

I recently updated my angular2 project to the final release after previously using angular2 RC5 for development. However, I encountered an error message stating "scrollable is not a known element." If I change <scrollable><!--- angular code -- ...

javascriptangulartypescript