CODEWITHSUNDEEP
javascriptjqueryvalidation
thebarless
thebarless

Reputation: 472

Jquery form validator tooltip styling disappears

Using jQuery Form Validation plugin, I'm able to get a styled tooltip (JSFiddle) to appear without any CSS. However, when I input this exact script into my page, it disappears.

JS: 

$(function () {
   $('#ajaxform').validate({ // initialize the plugin
   //   e.preventDefault();
        submitHandler: function (form) {
            //ajax do stuff

            setTimeout(function () {
                $('#messageResponse').fadeOut(500)
            }, 5000);

            // resets fields
            $('#ajaxform')[0].reset();
            //alert('form submitted via ajax');
            return false; // blocks redirect after submission via ajax
        }
    });
});

Form:

<form name="ajaxform" id="ajaxform" method="post" action="ajax.php">
<input name="type" type="radio" value="1" required="">1</input>
<input type="radio" name="type" value="2">2</input>
<input name="type" type="radio" value="3">3</input>
<input name="submit" type="submit" id="submit" value="Submit"></input>
</form>

While playing with this script, I can get the tooltip to appear by uncommenting the e.preventDefault(); line.

Otherwise, it provides the unstyled error next to the input box. I can't figure out if I have unintended CSS applied to it, because Firebug won't select the popup. Can someone explain what is causing this tip to unstyle? Alternatively, can someone explain how to create the default tip that's on the fiddle?

Upvotes: 0

Views: 292

Answers (1)

Neo
Neo

Reputation: 7081

You are using "required" attribute in your code which works with HTML5 based browsers. It has nothing to do with the plugin you are using. Check for the DOC Type in your page and change it to to make it work.

Though if you are planning to support it cross browser, you will have to write your own code to show the tooltip.

Upvotes: 1

Related Questions