Validation through jquery fails when it shouldn't

Question

My form is set up with some HTML5 to require the fields to be filled in before submission can proceed, but as this isn't supported in < IE10, I need to ensure that those browsers don't allow empty forms to be submitted...

<form name="upload" method="post" action="send_form_email3.php" enctype="multipart/form-data">
    <div width="100%" class="con3">
        <div class="lable">
            <label for="first_name">First Name *</label>
        </div>
        <input  type="text" name="first_name" id="first_name" class="span4" required />

        <div class="lable">
            <label for="email">Email Address *</label>
        </div>
        <input  type="text" name="email" id="email" class="span4" required />

        <div class="lable">
            <label for="telephone">Contact Number *</label>
        </div>
        <input  type="text" name="telephone" id="telephone" class="span4" required />

        <div class="lable">
            <label for="comments">Why are you the fun, energetic person that we are looking for? *</label>
        </div>
        <textarea  name="comments" rows="8" id="comments" class="span4" required /></textarea>

        <div class="lable">
            <label for="upload">Send Us Your CV *</label>
        </div>
        <input type="file" name="upload" id="upload" required />

        <input type="submit" value="Submit" class="btn btn-success">
    </div>
</form>

To handle this validation on < IE10 (are there any other non-DOM compliant browsers out there? lol), I wrote some jquery.

Mostly the below works on other forms, but this time I thought I might try to improve it a little and loop through the controls with .each instead of running a new if statement for each input.

$("form[name=upload]").submit(function() {
    // Internet Explorer uses a different call to stop form submission
    // so we need to determine which browser is being used.

    // DOM compliant browsers use HTML5 to do this.

    if ($.browser.msie)
    {
        ($("form[name=upload] input").each(function() {
            if ($(this).val() == "")
            {
                var target, errmsg;
                switch ($(this).attr("name"))
                {
                    case "first_name":
                        errmsg += "Please enter your name.\r\n";
                        break;
                    case "email":
                        errmsg += "Please enter your email address.\r\n";
                        break;
                    case "telephone":
                        errmsg += "Please enter a contact number.\r\n";
                        break;
                    case "comments":
                        errmsg += "Please tell us why you are the fun, energetic person that we are looking for.\r\n";
                        break;
                    case "upload":
                        errmsg += "Please upload your CV so that we can review it.";
                        break;
                }
                event.returnValue = false;
                alert(errmsg);
            }
        });
    }
});

I'm not very familiar with .each() so I can't be sure myself if I got it right. Currently this code still allows form submission to go through and doesn't alert with anything even if there are empty fields.

Answer 1

So in the end I took the easy way out and surrounded my script block with a conditional statement:

<!--[if IE]>
<script type="text/javascript">
    // Do jquery validation here...
</script>
<![endif]-->

Answer 2

The following code seems to work :

• fixed some syntax errors with parenthesis and curly bracket (markup for the textarea has double close '/' too)

• replaced the $.browser.msie which is not supported since jquery 1.9 with navigator.userAgent.match(/msie/i) (testing for support of the required attribute might be even better)

  $("form[name=upload]").submit(function() {      
  // Internet Explorer uses a different call to stop form submission
  // so we need to determine which browser is being used.
  
  // DOM compliant browsers use HTML5 to do this.
  
  if (navigator.userAgent.match(/msie/i))
  {
      $("form[name=upload] input").each(function() {
          if ($(this).val() == "")
          {
              var target, errmsg;
              switch ($(this).attr("name"))
              {
                  case "first_name":
                      errmsg += "Please enter your name.\r\n";
                      break;
                  case "email":
                      errmsg += "Please enter your email address.\r\n";
                      break;
                  case "telephone":
                      errmsg += "Please enter a contact number.\r\n";
                      break;
                  case "comments":
                      errmsg += "Please tell us why you are the fun, energetic person that we are looking for.\r\n";
                      break;
                  case "upload":
                      errmsg += "Please upload your CV so that we can review it.";
                      break;
              }
              event.returnValue = false;
              alert(errmsg);
          }
      });
      }
  });
  

Hope this will help