Add Subject Validated with airSlate SignNow

Add subject validated

hello and welcome to web Dementors youtube channel and beer watching running bootstrap series so this video is about adding optional icons that is the glyphicon sphere form elements that is the input field during the form validation so in the last video we have seen about how to add form validation classes to your input field using jQuery and JavaScript so in this field we're going to advance it by adding glyphicon icons to your input fields by using jQuery and JavaScript by doing the form validation for your box so in order to add a bit of people an icon in the last video we have seen just copy this and paste it I'm going to do it again just to make sure that people don't forget it if we have to face this we also have to add one more class to here have feedback but I'm not doing it just to show you how to look can see that the click on icon is added after this input field so if you want this political icon to be inside you have to add the hash key back clap and you can also see that the flipping on icon is in black in color that is actually the color of the text or the font color that we are using in this input field so based on the class used in here that is in half error or half sexist or half warning that flipping on icons color will be applied so now I'm going to add we have feedback just to show you how it will look before we get on to the actual part of validating the pump so now you can see that click on icon is moved into the input field and this is actually how you add the glyphicon icons but I don't want to add it just by adding the code in my HTML I want this to be added on the go or dynamically using my JavaScript or jQuery so how to do that well it's a little bit difficult or advanced process I'm going to clearly explain you how to do that and we're going to remove all those things from here first and this is the place that we are going to add all those classes for the first that is the if statement then where are is it true we have to add the error and also the cross sign you can see that in here you have to add this icon to our input field and if it is out that is the part where the input has been given we to add this tick marks that you see click on okay so what we're going to do is that we're going to copy this and we have to use it in here I have to append it to my bill class that is to do that we have already taken I'm going to append this I'm going to use these single codes because of the reason that we are having the double codes for the classes in gear but again I'm not adding the ID but we need the ID I'm just going to show you why we need the ID after I've completely included this so we have included this now we will be seeing that implementation form so I'm going to press ENTER submitted complete with the red color I'm going to press something and when I add it you can see that well I have forgotten to add a half feedback class so I have to add the class has feedback so now when i refresh the page and I type something and submit it you can see that the tick mark but I also want the styling to be given so I'm going to add the ask sorry Chuck yeah it's working fine so you have to add the cross sign in here I have to use the div dot append and here as well and put C it's going to be removed and I'm going to refresh the page and test it out now I'm going to submit it but now top feedback is not added after you stop a little bit fast so I happen to notice it's my fault so close let's reason why we test it up so now you can see that the cross sign is added but now and I add the text in here you'll be seeing this problem here we have both the icons inside this the cross sign and also the tick sign I want only one so for that I have to remove that glyphicon from my input field but we cannot just remove it as we have done in the remove class wait we have to remove it by specifically finding out this plant left for that I have to give an ID to this for that I'm going to give cliff CN and I'm going to add the ID in here of course this is wrong just going to do this and we have added the ID now this is going to work cause I have to add it to here as well and now I want to make sure it works fine of course I have to actually find this and also remove it for both the conditions for both the two and also the false condition so for that I'm going to use the jQuery start remove function and then here I'm going to give the ID of my click on circlip p.m. and I'm going to use the ID in here so this is going to actually remove I click on both the cases before appending and of course we have to remove it and also I have to remove the classes as error and here has success in case so this is to make sure that if my user are if the visitor of my website is actually changing the content of my input field it also has to check it again so that's the reason why I'm doing this so I'm going to refresh the page run a submitted well I think I have done something wrong in here just have to add the plus sign again so this is the concatenation operator we have used it in the last time as well so now I'm going to go back fresh my page about this submit it you can see that the cross ion also being passed your class has been added add some text submitted can see that they have Fox's class of fanatic while we remove the half arrow class and also added the tick sign and remove the cross sign that is the glyphicon remove and a data click on ok so now also we have to make sure that we remove we have feedback but I'm adding it and the next line itself so for that I'm not removing the half feedback in here but he can remove it and add it again in case you are having something different in your mind so this is how you actually add and remove the glyphicon icon from your input field on some validation by using the jQuery and JavaScript so we can test it out in all the fields curves I can see that I'm entering in here and can see that and finally my form has been submitted perfectly so this is how you do it and I hope this video is very useful for you and if you find this video useful please like this video share this video and subscribe with the channel and also please leave a comment on what you think about this video if you have any kind of doubts issues problems or having difficulty in implementing this please leave a comment in the comment section of the video or in our Facebook or Twitter feed we will try to help as much as possible and also if you have any kind of feedback suggestions or if you think we have to do something in order to improve ourselves please let us know in the comment section or in our Facebook or Twitter feed or even if it will be website thank you for watching this video out great day