ie9 check if empty using javascript

Question

I am having trouble with the ie9 required attribute. The attribute does work on ie10 and above but I will also want to get it worked at ie9.

I have tried this:

$('#submit-button').click(function(){
  if($('#message').val() == ''){
     alert('Input can not be left blank');
  }
});

This function should run when you click the submit-button(check on id) and then he will search for the id message and looks if it is empthy or not.

But this does unfortunately not work for me in ie9. Is there another solution that can solve this porblem?

Solved it, here is the answer (I'm using laravel)

    @if($errors->any())
    <br>
    <div class="alert alert-danger">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </div>
@endif

Now all the errors will be listed, so if one or more input(s) are empty the alert will show it.

Answer 1

If you use a library like Modernizr which has a detection technique for html5 feature implementation but it doesn't have a browser detection capability.

A solution is:

You could try hooking in a simple detection script like this and then using it to make your choice. I've included Version Detection as well just in case that's needed. If you only want to check of any version of IE you could just look for the navigator.userAgent having a value of "MSIE".

Taken from here.

But it's good to use $.trim() method before any value check for inputs.

var BrowserDetect = {
  init: function() {
    this.browser = this.searchString(this.dataBrowser) || "Other";
    this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
  },
  searchString: function(data) {
    for (var i = 0; i < data.length; i++) {
      var dataString = data[i].string;
      this.versionSearchString = data[i].subString;

      if (dataString.indexOf(data[i].subString) !== -1) {
        return data[i].identity;
      }
    }
  },
  searchVersion: function(dataString) {
    var index = dataString.indexOf(this.versionSearchString);
    if (index === -1) {
      return;
    }

    var rv = dataString.indexOf("rv:");
    if (this.versionSearchString === "Trident" && rv !== -1) {
      return parseFloat(dataString.substring(rv + 3));
    } else {
      return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
    }
  },

  dataBrowser: [{
      string: navigator.userAgent,
      subString: "Edge",
      identity: "MS Edge"
    }, {
      string: navigator.userAgent,
      subString: "MSIE",
      identity: "Explorer"
    }, {
      string: navigator.userAgent,
      subString: "Trident",
      identity: "Explorer"
    }, {
      string: navigator.userAgent,
      subString: "Firefox",
      identity: "Firefox"
    }, {
      string: navigator.userAgent,
      subString: "Opera",
      identity: "Opera"
    }, {
      string: navigator.userAgent,
      subString: "OPR",
      identity: "Opera"
    },

    {
      string: navigator.userAgent,
      subString: "Chrome",
      identity: "Chrome"
    }, {
      string: navigator.userAgent,
      subString: "Safari",
      identity: "Safari"
    }
  ]
};

BrowserDetect.init();

$('#submit-button').click(function() {
  if (BrowserDetect.browser == "MSIE" && BrowserDetect.version < 10 && $.trim($('#message').val()) == '') {
    alert('Input can not be left blank');
    $('#message').focus();
  }
});

document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");