Form validation backwards compatible with earlier versions of IE

StackOverflow https://stackoverflow.com/questions/16082882

题

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!

有帮助吗？

解决方案

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
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top