Form validation backwards compatible with earlier versions of IE

Question

I know this is an on going concern in IT these days with different versions of IE being used between different machines, but I was wondering if someone might be able to advise me on how to successfully make this code (which works fine for all my form validation in IE 10, FireFox, Chrome, etc) work in earlier versions of IE. The version I am testing it against is IE7.

function validate(form){
var p = form.getElementsByTagName("p");
var valid = true;
for(var i = 0; i < p.length; i++){
    var inputs = p[i].getElementsByTagName("*");
    if(p[i].className == "required" || p[i].className == "required error"){
        for(var n = 0; n < inputs.length; n++){
            switch(inputs[n].tagName){
            case "INPUT":
                if(inputs[n].value.trim() == "" || inputs[n].value == null){
                    if(+navigator.sayswho[1] < 9){
                        //JavaScript for IE version 8 and below
                    }
                    else{
                        inputs[n].className = inputs[n].className.replace( /(?:^|\s)error(?!\S)/ , "" );
                        inputs[n].className = inputs[n].className+" error";
                        p[i].className = "required error";
                    }
                    valid = false;
                }
                break;
            case "SELECT":
                if(inputs[n].options[inputs[n].selectedIndex].value == 0 || select.value == null){
                    if(+navigator.sayswho[1] < 9){
                        //JavaScript for IE version 8 and below
                    }
                    else{
                        inputs[n].className = inputs[n].className.replace( /(?:^|\s)error(?!\S)/ , "" );
                        inputs[n].className = inputs[n].className+" error";
                        p[i].className = "required error";
                    }
                    valid = false;
                }
                break;
            }
        }
    }
}
if(valid){
    var elements = form.getElementsByTagName("*");
    for(var i = 0; i < elements.length; i++){
        switch(elements[i].type){
        case "submit":
            elements[i].disabled = true;
            break;
        case "reset":
            elements[i].disabled = true;
            break;
        case "button":
            elements[i].disabled = true;
            break;
        }
    }
    return true;
}
return false;

}

+navigator.sayswho[1] is a value from another question I found on here that returns an int representing the browser's version (in this case 7)

An example of a form field is:

        <p class="required">
        <span>Required Field</span>
        <input type="text" id="username" name="username" class="logon_field" onfocus="clearError(this)" placeholder="Username" autofocus />
    </p>

The method is called using validate(this) in the form's onsubmit attribute Thanks in advance!

What isn't working? What error message or behavior do you get? — Jeremy J Starcher, Apr 19 '13 at 05:52
Hi Jeremy, since uploading this question the above code has shown to work with select lists, however when an input of type "text" is enclosed by
tags the validation simply doesn't execute and the form submits regardless. No error messages have been displayed as yet. Thanks — James Chapman, Apr 19 '13 at 21:47

score 1 · Accepted Answer · edited May 23 '17 at 10:25

Ah.. doing some looking here on SO. Seems there are some issues with getElementsByClassName and IE7.

getElementsByName in IE7

I'd solve it by breaking things into a couple of different pieces, shown below.

Free bonus, BTW. 'addClass' 'removeClass' and 'hasClass'

It is better to put the required attribute (or the class) on the input field itself, rather than on the wrapper... though you can set the wrapper's class to show the field is in error.

<doctype html>
<html>
<head>
<title>
Test  page
</title>

<script>

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;
}

function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

function clearError(element) {
}

function validate(form) {
  var i, l;
  var input;
  // First, let's check the input fields
  var inputs = form.getElementsByTagName("input");
  for (i = 0; i < inputs.length; i++) {
    input = inputs[i];

    // Skip stuff we don't want.
    // You'll want password this list yet.
    if (input.type !== "text") {
      continue;
    }

    if (input.required || hasClass(input, "required")) {
    if (input.value == "") {
      alert(input.name + " is required");
      }
    }


  }
}

</script>


</head>
<body>
<form action="#" onsubmit="validate(this); return false">
  <p>
  <label for="username">Required Field</label>
  <input type="text" class="required" id="username" name="username" class="logon_field" onfocus="clearError(this)" placeholder="Username" autofocus />
  </p>

  <p>
  <label for="trivia">Trivia Question</trivia>
  <input type="text" id="trivia" name="trivia" class="" onfocus="clearError(this)" placeholder="Username" autofocus />
  </p>

  <input type="submit">
</form>

</body>
</html

Thanks Jeremy, I had to alter it slightly for my code and I still use the
wrappers to style the elements despite it not being best practice but I'm in too deep to change the structure now!Maybe I'll have time a bit later, but for now it works in both versions of IE which is all I can ask for, and the breakdown to three functions has made my JavaScript much easier to work with and reuse, can't thank you enough, much appreciated. — James Chapman, Apr 20 '13 at 00:49

Form validation backwards compatible with earlier versions of IE

1 Answers1