SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    URL + Image Extension Validation?

    I have two text fields in which the user can input the path to an image. These fields are not required but if the user put something here, it must validate the following format:

    ALLOWED: gif, jpg, jpeg, png, jpe, bmp, tif

    Thus, the following can accepted:
    http://domain.com/image.gif
    http://domain.com/path_to_image/image.jpg

    And these inputs should not be allowed:
    http://domain.com
    http://domain.com/folder
    http://domain.com/index.php
    http://domain.com/file.html
    .........

    How can I achieve this?
    P.S. The input fields are not a file upload fields, they are just a regular text fields.

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you aware that the file extension does not determine with certainty what type of resource lies at the url? Meaning, http://domain.com/image.gif could be an html page. Likewise, http://domain.com/index.php could be a gif image, or a csv file, or a flash file etc...

    File extensions are a convention.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the point, but currently that's what we are after for.

    Any inputs are greatly appreciated.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There are all sorts of pre-made validators out there, like fValidate and jQuery Validation that allow you to write your own custom validator for things like image filenames, but here's some validation code that I whipped up just now for you.

    The following test code has all sorts of useful techniques being applied, but basically when the form field is left, the contents are validated and a tickbox or cross appears to the right of the field.

    When the form is submitted, everything is run through the validator once again, and if anything doesn't pass validation the submission is prevented nutil everything passes validation.

    style.css
    Code css:
    .validated {
        padding-left: 0.5em;
    }
    .valid {
    	color: green;
    }
    .invalid {
    	color: red;
    }

    testValidateImageFilename.html
    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <form id="myForm">
    	<p>Please enter a filename. Valid extensions are: .gif, .jpg, .jpeg, .png, .jpe, .bmp, and .tif</p>
    	<p><input type="text" name="filename"></p>
    </form>
    <script src="validate.js"> </script>
    </body>
    </html>

    validate.js
    Code javascript:
    initValidation(form);
    function initValidation(form) {
    	var form = document.getElementById('myForm');
    	form.elements.filename.validator = isValidExtension;
    	form.elements.filename.onblur = validate;
    	form.onsubmit = validate;
    }
    function isValidExtension() {
    	var filename = this.value;
    	var isValid = false;
        var extns = ['gif', 'jpg', 'jpeg', 'png', 'jpe', 'bmp', 'tif'];
        var extnsLen = extns.length;
        var extnRx;
        var i;
        for (i = 0; i < extnsLen; i += 1) {
            extnRx = new RegExp('\.' + extns[i] + '$');
    		if (extnRx.exec(filename)) {
    		    isValid = true;
    		}
        }
    	return isValid;
    }
    function validate() {
    	var field = this;
        var validMark = '\u2714';
    	var invalidMark = '\u2718';
        var symbol = document.createElement('span');
    	var text;
    	var className;
    	var isValid = true;
    	if (this.nodeName === 'FORM') {
    	    return validateForm();
    	} else {
    		isValid = field.validator.call(field);
    	    if (isValid === true) {
    		    text = validMark;
    			className = 'valid';
    		} else {
    		    text = invalidMark;
    			className = 'invalid';
    		}
    		symbol.appendChild(document.createTextNode(text));
    		addClass(symbol, 'validated');
    		addClass(symbol, className);
    		appendToElement(field, symbol, 'validated');
    		return isValid;
    	}
    }
    function validateForm() {
    	var isValid = true;
    	var els = form.elements;
    	var elsLen = els.length;
    	var i;
    	for (i = 0; i < elsLen; i += 1) {
    		if (els[i].validator) {
    			isValid = isValid && validate.call(els[i]);
    		}
    	}
    	return isValid;
    }
    function appendToElement(el, newEl, replaceClass) {
    	if (el.nextSibling) {
    		if (hasClass(el.nextSibling, replaceClass)) {
    			el.parentNode.removeChild(el.nextSibling);
    		}
    	}
    	if (el.nextSibling) {
    	    el.parentNode.insertBefore(newEl, el.nextSibling);
    	} else {
    		el.parentNode.appendChild(newEl);
    	}
    }
    function hasClass(ele,cls) {
    	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }
     
    function addClass(ele,cls) {
    	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •