jquery.validation not working on IE and smartphone bassistance

Question

I'm using bassistance jquery.validation and it works on ff and chrome but not on mobile and IE. The examples on the website works fine but once in my project only ff and chrome. I'm using ruby and rails.

Using this setup .

(function() {
// use custom tooltip; disable animations for now to work around lack of refresh method on tooltip
$("#madlibs_form").tooltip({
    show: false,
    hide: false
});


// validate signup form on keyup and submit
$("#madlibs_form").validate({
    rules: {
        industry: {
            required:"required";
        },
        amount: {
            required:"required";
        }


    },
    messages: {
        desired_amount: {
            required:{"Please enter loan amount"}

    }
});

$("#madlibs_form input:not(:submit)").addClass("ui-widget-content");
$(":submit").button();
})();

Answer 1

I'm not understanding how your code works in any browser at all...

required:"required";

• Setting required rule to "required" breaks the rule and it's ignored.
• Using a semicolon prevents the plugin from working at all.

Should be this...

required: true

Also, check how you placed braces around your custom messages.

DEMO: http://jsfiddle.net/Lks8E/

---

Alternatively, you could do it like this. Notice how we use the field name in this case and they are separated with a comma.

industry: "required",
amount: "required"

DEMO 2: http://jsfiddle.net/Lks8E/1/

---

EDIT based on OP's comment:

This is how my html looks <input type="text" name="desired_amount" class="madlibs_enter_amount" placeholder="enter a amount" required > should I add required="true" here?

This explains why your code was working in some browsers. Since you had required within the input element, HTML 5 validation took over where the plugin was failing.

No. you alreay have a required attribute in there, why would you also add another one... required="true" ? Although, it might be best to replace it with proper HTML 5 syntax, required="required" . See: https://stackoverflow.com/a/3012975/594235

And since you already have the required attribute within the HTML, you don't need to redundantly declare any of those required rules within .validate() .

$('#madlibs_form').validate();

Examine this jsFiddle very carefully...

http://jsfiddle.net/PFF4v/

Answer 2

Fix issue jquery validate + jquery (1.4.4 ) don't working IE 7:

Don't use :

$('#form').validate({
 rules : {
  name : "required"
 }
});

use :

$('#form').validate({
 rules : {
  name : {
   required : true
  }
 }
});