Attribute Required not working in IE8/Safari using Jquery Validate

Question

I am using Jquery validate plugin and it is having problems with required attribute as my form is submitting despite having the required attribute.

I have tried required="required" and just required by itself, but no luck.

Here is my sample code:

   <input id="txt_field1" name="txt_field1" type="text" required/>

Also tried:

   <input id="txt_field2" name="txt_field2" type="text" required="required"/>

I have found 2 workarounds, but doesn't seem to be the best way.

 $('form').validate({
       rules: {
         txt_field1: { 
            required: true
         },
         txt_field2: {    
            required: true
         }
       }
 });

This seems to have work as well:

 $('form').validate();
 $('input[required]').each(function () {

        $(this).rules("add", {
            required: true
        });

  });

Is there a better way than having to add the extra code to get it to work? I am using Jquery Validate version 1.9.

Thanks

Answer 1

I think the required attribute is actually a HTML5 feature and not a jquery feature. In jquery you do not need to put in a required attribute, just declare the dom element as required as your first work around states. The required attribute is not yet supported by some browsers.

For Safari the form validation is only partially supported, i.e. does not give a warning when a required form is not filled during submission, while for IE8 its totally not supported. Click these links for more info: http://caniuse.com/#feat=form-validation and here http://www.w3schools.com/tags/att_input_required.asp.