Validating a File Name with JS

Marc0

Well-known member
Registered
Joined
Jun 6, 2012
Messages
888
Points
28
There are many things that can be done with regular expressions, but one of the most useful is validating entry fields in forms on your Web pages

This script asks for an image location and, if it passes the validation, displays the image on the page.

Code:
window.onload = initForms;

function initForms() {
     for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = function() {return validForm();}
     }
}

function validForm() {
     var allGood = true;
     var allTags = document.getElementsByTagName ("*");

     for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
           allGood = false;
        }
     }
     return false;

     function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split (" ");

        for (var j=0; j<allClasses.length; j++) {
           outClass += validBasedOnClass(allClasses[j]) + " ";
        }

        thisTag.className = outClass;

        if (outClass.indexOf("invalid") > -1) {
           invalidLabel(thisTag.parentNode);
           thisTag.focus();
           if (thisTag.nodeName == "INPUT") {
              thisTag.select();
           }
           return false;
           }
           return true;

           function validBasedOnClass(thisClass) {
              var classBack = "";
              switch(thisClass) {
                 case "":
                 case "invalid":
                    break;
                 case "imgURL":
                    if (allGood && !imgURL (thisTag.value)) classBack = "invalid ";
                 default:
                    classBack += thisClass;
              }
              return classBack;
           }

           function imgURL(newURL) {
              var re = /^(file|http):\/\/\S+  \/\S+\.(gif|jpg)$/i;

              if (re.test(newURL)) {
                 document.getElementById ("chgImg").src = newURL;
                 return true;
              }
              return false;
           }

           function invalidLabel(parentTag) {
              if (parentTag.nodeName == "LABEL") {
                 parentTag.className += " invalid";
              }
          }
      }
}
If the user enters something that isn't a valid image file name, the page shows an error, thanks to regular expressions.

When the image name is entered correctly, the image is displayed on the page.
 

Marc0

Well-known member
Registered
Joined
Jun 6, 2012
Messages
888
Points
28
very detail tips, thanks for your sharing
 
Older Threads
Replies
0
Views
3,125
Replies
0
Views
2,896
Replies
0
Views
3,489
Replies
2
Views
4,123
Replies
1
Views
3,098
Newer Threads
Replies
3
Views
5,279
Replies
3
Views
5,829
Replies
0
Views
4,397
Replies
0
Views
3,702
Latest Threads
Replies
0
Views
527
Replies
2
Views
499
Replies
1
Views
430
Replies
2
Views
1,017
Replies
1
Views
654
Recommended Threads
Replies
26
Views
12,596
Replies
2
Views
3,676
Replies
7
Views
7,650
Replies
20
Views
16,791
Replies
4
Views
3,404

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top