Tuesday, December 20, 2011

How to put a style on input file type using CSS and jQuery

I came to this development where in I need to put a style on input file element. This is actually a challenge for me, but was able to find a way to do it. The button and inputbox is normally display in one call of an element. However, in CSS we can't style it the way we do with a normal input box, text area, etc.. and the only way for us to style it is to use jQuery/Javascript with a simple cheat using CSS.

First, we need to have a style for our inputbox and button.., that is actually for you to decide on how you want it to be.

Second, setup the HTML with the input file type element together with a styled inputbox and button. Please see below on how it will look like and take note of the id attribute I put in to be use for jQuery.

<input type="text" id="inputbox" name="inputbox" class="myinputbox"/>
<input type="button" id="button" name="button" class="mybutton"/>
<input type="file" id="inputfile" name="inputfile"/>

Once you've setup your HTML, we need to use the jQuery to trigger the #inputfile whenever we click on #inputbox or #button. Please see below.

$('#inputbox, #button').click(function() {
    $('#inputfile').trigger('click');
});


We also need to get the value of the #inputfile and change the value of the styled #inputbox as it changes. This is normally the filename of the file you selected on the open file dialog box.

$('#inputfile').change(function() {
    var data = $(this).val();
    var file = data.length ? data.split('\\').pop() : '';
    $('#inputbox').val(file);
});


Now, whenever you click on #inputbox and #button, the open file dialog box should appear and any change of value on #inputfile should reflect on #inputbox.

Lastly, we need to hide the #inputfile and retain the styled #inputbox and #button with a functional input file type element.

We can't use style="display:none" coz in some browsers JS will not work if the element is HIDE. So, the best way to do it is to set the opacity to "0" zero. This is a simple cheat to hide the elements without disabling them.

You will also have to consider other browsers, so the style should support all browsers. Please see below.

-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;


In summary, your HTML script should be like this.

<html>
<head>
<title>How to put a style on input file type using CSS and jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <input type="text" id="inputbox" name="inputbox" class="myinputbox"/>
    <input type="button" id="button" name="button" class="mybutton"/>
    <input type="file" id="inputfile" name="inputfile" style="opacity:0"/>
</body>
<html>
<script type="text/javascript">
$(document).ready(function() {
    $('#inputbox, #button').click(function() {
        $('#inputfile').trigger('click');
    });

    $('#inputfile').change(function() {
        var data = $(this).val();
        var file = data.length ? data.split('\\').pop() : '';
        $('#inputbox').val(file);
    });
});
</script>


Hope this helps a lot of developers.
Please see also my new post "File upload with style using jQuery and CSS".
Posted by Unknown at 4:57 PM 0 comments
Labels: , , , , , , ,

Sunday, December 4, 2011

How to validate email address in PHP and jQuery.

PHP has a built in function where you can validate email address, but please take note that it only validates the format of the email address and not to check whether it is real or not.

To check whether the email address is real, you just have to put verification process to your application. Usually, verification process goes with registration process where user have to input their email address and other credentials. The application should send a confirmation link to the email address upon registration. The confirmation link must then be clicked by user to verify their registration or email address.

Anyway, for pre-validation, it's still better to put format validation of email address. This is for the application not to waste time of sending emails. Please see below for the quick and easy way in PHP.

<?php
$email = 'paul123@wideumbrella';

if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "valid";
} else {
        echo "invalid";
}

?>


You can also validate the email address using jQuery. Please see custom function and implementation I did for jQuery.

<html>
<head>
<title>Validate Email</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
        $.fn.validateEmail = function() {
                var email = $(this).val();
                var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);

                return pattern.test(email);
        }

        $(document).ready(function() {
                $('.btnValidate').click(function() {
                        alert($('#email').validateEmail());
                });
        });
</script>
</head>
<body>
        <input type="text" value="" id="email"><a class="btnValidate" title="Validate" href="#">Validate</a>
</body>
</html>


Quote for the day: Perseverance is needed to release most of life's rewards. It's the last step in the race that counts the most. That is where the winner is determined. That is where the rewards come. If you run every step of the race well except the last one and you stop before the finish line, then the end result will be the the same if you never ran a step.
Posted by Unknown at 8:24 AM 0 comments
Labels: , , , , , ,
Subscribe to: Posts (Atom)

Leadership 101


  • Leadership demands sacrifices for the near-term to receive lasting benefits. the longer we wait to make sacrifices, the harder they become. Successful people make important decisions early in their life, then manage those decisions the rest of their lives.
  • Growth does not happen by chance. If you want to be sure to grow, you need a plan something strategic, specific, and scheduled. it's a discipline that would need incredible determination from us.
  • Success comes by going the extra mile, working the extra hours, and investing the extra time. The same is true for us. If we want to get to excel in any segment of life, a little extra effort can help. Our efforts can go a long way if we only work a little smarter, listen a little better, push a little harder, and persevere a little longer.
  • Making a difference in your work is not about productivity; it's about people. When you focus on others and connect with them, you can work together to accomplish great things.
  • Envision a goal you'd like to reach. Make it big enough to scare you a little. Now write down a plan for moving toward it. Create mini-goals within the big goal, to set yourself up for continual progress. And include some risks, too. Set yourself up for success.
  • Leaders build margins, not image. A leader may be forced to take unpopular stands for the good of the company. Popularity isn't bad, but decisions made solely on the basis of popular opinion can be devastating. So take courage and make the right though sometimes painful choices.