SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict kuldeepkaundal's Avatar
    Join Date
    Oct 2008
    Location
    India
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple ImageType Validation on one page

    hi,

    am uploading three images on same page and i've put in three validations for all three images, my issue is that only first of them works, i mean, as soon as i upload a valid image, form gets submitted, but, it doesn't check for next block of validations for other two images, i used to put tha code for one image, but, i need to check file type for all three images, my code is below:

    var fpic= document.getElementById("fpic").value;
    var mpic= document.getElementById("mpic").value;
    var bimage= document.getElementById("images").value;


    var pathLength1 = fpic.length;
    var lastDot1 = fpic.lastIndexOf(".");
    var fileType1 = fpic.substring(lastDot1,pathLength1);
    if((fileType1 == ".gif") || (fileType1 == ".jpg") || (fileType1 == ".png") || (fileType1 == ".GIF") || (fileType1 == ".JPG") || (fileType1 == ".PNG"))
    {
    return true;
    }
    else
    {
    alert("We support .JPG, .PNG, and .GIF image formats. Your file-type is " + fileType1 + ".Please upload a valid father image!.");
    return false;
    }

    var pathLength2 = mpic.length;
    var lastDot2 = mpic.lastIndexOf(".");
    var fileType2 = mpic.substring(lastDot2,pathLength2);
    if((fileType2 == ".gif") || (fileType2 == ".jpg") || (fileType2 == ".png") || (fileType2 == ".GIF") || (fileType2 == ".JPG") || (fileType2 == ".PNG"))
    {
    return true;
    }
    else
    {
    alert("We support .JPG, .PNG, and .GIF image formats. Your file-type is " + fileType2 + ".Please upload a valid Baby image!.");
    return false;
    }

    var pathLength = bimage.length;
    var lastDot = bimage.lastIndexOf(".");
    var fileType = bimage.substring(lastDot,pathLength);
    if((fileType == ".gif") || (fileType == ".jpg") || (fileType == ".png") || (fileType == ".GIF") || (fileType == ".JPG") || (fileType == ".PNG"))
    {
    return true;
    }
    else
    {
    alert("We support .JPG, .PNG, and .GIF image formats. Your file-type is " + fileType + ".Please upload a valid Baby image!.");
    return false;
    }

    Plz suggest me a solution for this problem!

    Thanks in advance!
    kul.

  2. #2
    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)
    As soon as the code reaches a return true or a return false, all other code below that is ignored.

    How you can deal with this is to use a variable to hold the validation state, and make adjustments to that.

    When it comes to validation, it's best to presume that it validates, then use the code to set it to false when reasons are found to do so.

    The following is some pseudo-code to help describe the structure of things for you.

    Code javascript:
    var validates = true;
    if (validation1 fails) {
        do something;
        validates = false;
    }
    if (validation2 fails) {
        do something;
        validates = false;
    }
    ...
    return validates;

    For example, here is how a part of your original code would be affected.

    Code javascript:
    var pathLength1 = fpic.length;
    var lastDot1 = fpic.lastIndexOf(".");
    var fileType1 = fpic.substring(lastDot1,pathLength1).toLowerCase();
    if((fileType1 !== ".gif") && (fileType1 !== ".jpg") && (fileType1 !== ".png"))
    {
        alert("We support .JPG, .PNG, and .GIF image formats. Your file-type is " + fileType1 + ".Please upload a valid father image!.");
        validates = false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    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)
    And later on you may want the repeated parts of the script handled by some separate function.

    Code javascript:
    function validateImageName(name, errorMsg) {
        var pathLength = name.length;
        var lastDot = name.lastIndexOf(".");
        var fileType = name.substring(lastDot,pathLength).toLowerCase();
        if ((fileType !== ".gif") && (fileType !== ".jpg") && (fileType !== ".png"))
        {
            alert("We support .JPG, .PNG, and .GIF image formats. Your file-type is " + fileType1 + "." + errorMsg);
            return false;
        }
        return true;
    }

    Which would be called from your validation script as:

    Code javascript:
    if (validateImageName(fpic, 'Please upload a valid father image!')) {
        validates = false;
    }

    You could even use boolean logic to shortcut that in to one line:

    Code javascript:
    validates = validates && validateImageName(fpic, 'Please upload a valid father image!');

    In fact, your whole validation could be as easy as this:

    Code javascript:
    var images = [
        {id: 'fpic', err: 'Please upload a valid father image!'},
        {id: 'mpic', err: 'Please upload a valid mother image!'},
        {id: 'images', err: 'Please upload a valid baby image!'}
    ];
    var validates = true;
    for (var i = 0; i < images.length; i += 1) {
        validates = validates && validateImageName(images.id, images.err);
    }
    return validates;

    All that from just moving the commonly performed behaviour in to a seperate function called validateImageName. Great eh?
    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
  •