How to change validation style of input element when user input using jQuery

sogata (64) in utopian-io • 7 years ago (edited)

What Will I Learn?

You will learn how to create validation styles for error message
You will learn how to create validation styles for success message
You will learn how add success message when true and error message when false

Requirements

Basic knowledges about HTML
Basic knowledges about CSS
Basic knowledges about JavaScript

Difficulty

Basic

Tutorial Contents

Bootstrap includes validation styles for error and success messages. This is commonly used on an input element, when the user inputs correctly then the element input will change the style into a succes and when it is wrong then the input style will change to error. We need to use jQuery Script to validate the input and display the style according the input. For more detail, Let's pay attention on followin steps :

Open your text editor, Create new file save as validation.html
As we know for using bootstrap we should use HTML5 Doctype. Add the HTML5 element on your file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Validation Style</title>
</head>
<body>
</body>
</html>

or using bootstrap framework we should install or host bootstrap file first. If we don't want to do that, you can also add Bootstrap CDN as a replacement. You can visit bootstrap official website to get it. add and put it in <head> element.

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

To use jQuery we need to install or host it. Or we can also add jQuery CDN if we don't want to install or host it. we also have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit jquery official web. In this tutorial I use Google CDN. Add the CDN in <head> element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

[Creating Input Element Using Bootstrap]

Open the form element.

<form class="form-horizontal">
</form>

Open a div element in form with .has-feedback class. this class to accommodate the icon in input element

<div id="ctrl" class="has-feedback">
</div>

Create an input element in previous div

 <input id="input" type="text" class="form-control">

Open the span element to accomdate the true and false icon validation. Add .glyphicon class for bootstrap icon and .form-control-feedback class for adding icon in input

 <span id="icon" class="glyphicon form-control-feedback"></span>

[Adding jQuery]

To write the jQuery Script we should open <script> tag. You can put it in <head> element or in <body> element.

<script></script>

Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.

$(document).ready(function(){
});

Add a variable for the true data. For the sample in this tutorial I just add a data. You can add more data and get it from your database if your system connect to database

var right="utopian";

Select th input element and add on input evet function

 $("#input").on("input", function(){
});

Get data from input

var data=$(this).val();

Create a conditon for true and false input

 if(data==right){
}
else{
}

Remove the error class in #ctrl id and add the succes class

 $("#ctrl").removeClass("has-error");
 $("#ctrl").addClass("has-success");

Remove the error icon and add success icon

               $("#icon").removeClass("glyphicon-remove")
                $("#icon").addClass("glyphicon-ok");

Add the statement in else condition

                $("#ctrl").removeClass("has-success");
                $("#ctrl").addClass("has-error");
                $("#icon").removeClass("glyphicon-ok")
                $("#icon").addClass("glyphicon-remove");

[Testing]

Save the file and run it on your browser
Because the valid or true data we set in this tutorial is "utopian" . Now try to input except "utopian" you will see the error validation style :
Now try to input true data :

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

utopian-io aceh tutorials opensource jquery

7 years ago by sogata (64)

$27.34

17 votes

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!

Sort Order:

Trending

[-]

rizalrizal (42) · 7 years ago

sobat neufot long at..

$0.18

8 votes

[-]

sexbot (18) · 7 years ago (edited)

I need answer why u r giving flags to me @sogata

$0.15

2 votes

[-]

muhammadiqbhal (46) · 7 years ago

Nice your post

$0.13

1 vote

[-]

mizzy (49) · 7 years ago

Tgk. Neu Vote lon ile bacut.. Hana sagai nyoe that leumohh teuh hehe

$0.13

1 vote

[-]

sogata (64) · 7 years ago

Ahhahah, bereh nyan gure.

$0.00

[-]

mizzy (49) · 7 years ago

Pajan jeut neupeureunoe lon

$0.16

1 vote

[-]

sogata (64) · 7 years ago

bereh gampang nyan tgk

$0.00

[-]

rizalrizal (42) · 7 years ago

trimakasih that sobat(sogata) yg kleh vote long.,.oya pken topian droneuh hana ek uronyo.

$0.02

7 votes

[-]

sogata (64) · 7 years ago

Tengoh hana pah cuaca nyo rakan.

$0.00

[-]

masrureus (37) · 7 years ago

i need your vote , ka vote at
that weuh kuh hana soe ote
hahahaa
pajan ta duek2 lom?

$0.17

1 vote

[-]

sogata (64) · 7 years ago

Uro uro rabu entek kbn???

$0.00

[-]

onegood (53) · 7 years ago

Biar pun long mumang tentang nyan bang, sebab long hana meuphom

Tapi long tetap dukung droeneuh bang @sogata

$0.00

[-]

fikar22 (66) · 7 years ago

That is a very good explanation of how to change input elements with validation style when user input using jQuery, I like your posts @sogata

$0.00

[-]

sexbot (18) · 7 years ago

@sogata i need answer bro why becaus my reputation was going down bro plz remove flags

$0.00

1 vote

[-]

sogata (64) · 7 years ago

why you use #aceh tag and your post not relevant for Aceh. Never use aceh tag. All your post not for ACEH.

$0.00

[-]

sexbot (18) · 7 years ago

Ok remove flag bro I am also removing tag

$0.00

1 vote

[-]

lapulga (58) · 7 years ago

maybe you need more flag

$0.00

[-]

sexbot (18) · 7 years ago

Bro that tag us not removing bro after remove i massaged you but it's not removeing

$0.00

1 vote

[-]

arie.steem (71) · 7 years ago

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

$0.00

[-]

utopian-io (71) · 7 years ago

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

$0.00