Validate the form using Jquery

23 Sep

//auto-hide-placeholder-text-upon-focus
$(“input,textarea”).each(function(){
if($(this).val()==”” && $(this).attr(“placeholder”)!=””){
$(this).val($(this).attr(“placeholder”));
$(this).focus(function(){
if($(this).val()==$(this).attr(“placeholder”))
{
$(this).val(“”);
}
});
$(this).focusout(function(){
if($(this).val()==””)
{
$(this).val($(this).attr(“placeholder”));
}
});
}
});

$(‘#ss-submit’).on(‘click’, function(){
formValidation(‘#ss-form’);
});
function formValidation(formId){
var status=true;
$(formId+’ .required’).each(function(){
var element=$(this);
var elementVal=element.val();
var elementPlaceholderVal=element.attr(‘placeholder’);
var errorMsgId=element.attr(‘data-errorMsg’);
if(elementVal==” || elementVal==elementPlaceholderVal){
$(‘.’+errorMsgId).show();
element.addClass(‘errorField’);
status=false;
event.preventDefault();
}
else{
$(‘.’+errorMsgId).hide();
element.removeClass(‘errorField’);
}
});
return status;
}

Live Demo

Auto hide placeholder for text box and textarea

23 Sep

$(“input,textarea”).each(function(){
if($(this).val()==”” && $(this).attr(“placeholder”)!=””){
$(this).val($(this).attr(“placeholder”));
$(this).focus(function(){
if($(this).val()==$(this).attr(“placeholder”))
{
$(this).val(“”);
}
});
$(this).focusout(function(){
if($(this).val()==””)
{
$(this).val($(this).attr(“placeholder”));
}
});
}
});

 

DEMO HERE

Jquery Select Tab Based on URL

12 Jun
// JavaScript Document
var navSelectedStates = function() {
var currentURL = window.location.href;

if (currentURL.match('/setting/admin')) {
$('ul.tabs li:nth-child(3)').addClass('selected');
}

else if (currentURL.match('/setting/register_user')) {
$('ul.main_blog_subnav li:nth-child(5)').addClass('selected');
}

}();
help icon
In the jsfiddle demo page, just click the run button you will see the tab three will be select automatically based on the URL(_display)

working Demo is Here

What is the use of Jquery .addClass() & .toggleClass()

8 Jun

In addition to the .css() function, you can apply currently defined CSS classes by using the .addClass() function. Its counterpart function, .removeClass(), reverses the action.

$('img').addClass('imgbox');

The .toggleClass() function is a huge time-saver for toggling a state on and off with CSS. I normally use this to set event handlers for mouseenter (which applies the CSS classimg-hover to the image) and mouseleave (which removes it).

$('.imgbox').on('mouseenter', function (e) {
    $(this).toggleClass('imgopacity');
});

working Demo is Here

How to use Jquery css() & .attr()

8 Jun

You can change your website’s styles dynamically with jQuery’s .css() & attr() function. Either change styles that are already declared inline or in CSS files (such as font-sizecolor,background-color, etc.) or create new styles for elements.

$('div#' + id).css({
    'color': 'Blue',
    'background-color': 'orange'

});$('img').attr({
    'title': 'User image',
    'alt': 'User image'
});

working Demo is Here

How to use jquery wrap()

7 Jun

Now we will see how to push the ul element to inside a particular div and add some divs before and after.

Using jquery before() after() you can add elements to the DOM.

But there is a problem in that

Be aware that you are manipulating the DOM with before() & after() functions, not just simply concatenating some strings containing HTML. You cannot append .

You should use wrap() to add that div around your lists, and then use before() and after() to insert other divs.

$(‘ul.validation-messages’)
.wrap(‘<div class=”error_msg_div”>’)
.before(‘<div class=”error_msgicon_div”></div>’)
.after(‘<div class=”error_msgcloseicon_div”></div>’);

working Demo is Here

Email Validation Using Jquery

7 Jun
$(document).ready(function () {

$(“form”).submit(function (event) {
var text_val = $(‘#emailid’).val();
console.log(text_val);
var regex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if (!regex.test(j.trim(text_val))) {
$(‘.errormsg_box’).show();
return false;
} else {
$(‘.errormsg_box’).hide();
}

});

See the Demo
22 Apr

How I Got To Know About Jquery

I got a book from my friend (Smashing Book), The Smashing Book  is  for professional Web designers and developers, with a focus on useful techniques and best practices. To illustrate this they gave some example websites.I visited one of the website.And saw that text-labels were placed inside text-boxes.When i clicked a text-box, the text-label for that text-box moved to the left the text-box. If i didn’t  enter any text in a text-box then the text-label came back inside the text-box.

I started thinking that the site was done in flash because of these effects. When i inspected the page i was surprised because there was only HTML.

I asked Arvind Sridharan (my friend &  colleague at Rang De). How these effects work without flash. He told me that they used jquery  and that we can have these kind of effects on our website also. This is first time i heard about jquery. In my mind i had lot of questions   ‘what is jQuery’ , ‘Is it a progarmming language’ , ‘How can i use that in my Html page’ . Then i Googled it and i got lots of results. One of the result was a blog in which the writer said “jQuery is a Poor Man’s Flash”. At that time i couldn’t believe this now i am saying from bottom of heart that is 200% True.

Css & jQuery Tips and tricks

Love to work as a Designer

Follow

Get every new post delivered to your Inbox.

Join 25 other followers

%d bloggers like this: