0

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();
})();
Walls
  • 3,972
  • 6
  • 37
  • 52
ifelse
  • 299
  • 2
  • 8
  • 19

2 Answers2

2

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/

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • This is how my html looks should I add required="true" here??? – ifelse Mar 21 '13 at 16:57
  • @ifelse, See my edits and also might I suggest that you take a little time to carefully examine the code within each of my three jsFiddle demos. – Sparky Mar 21 '13 at 17:08
  • Okay how would I add a custom error popup bubble? Do you know if there's a jsfiddle example? I'm using http://jquery.bassistance.de/validate/demo/themerollered.html – ifelse Mar 21 '13 at 17:18
  • @ifelse, that's really off-topic to your question, but you can see a jsFiddle in my Q & A here for one example: http://stackoverflow.com/q/14741688/594235 – Sparky Mar 21 '13 at 17:20
  • Thanks Sparky I figure you'll turn me down on my last question :) Thanks again... – ifelse Mar 21 '13 at 17:58
  • @ifelse, did you see the link I gave you?... it fully answered your new question. http://stackoverflow.com/q/14741688/594235 – Sparky Mar 21 '13 at 21:55
0

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
  }
 }
});
hunginf
  • 16