JQuery Validation: How to not display errors? OR How to display errors as a tooltip

jqueryvalidation

I want my errors to float above, left-justified, the input field that doesn't validate. How can I do this?

If I can't, how can I turn the errors off? I still want the fields to validate (and highlight on error), but not for the actual error messages to display. I couldn't seem to find anything in the jQuery docs that would let me turn them on/off… ??

Best Solution

Use the errorPlacement property for your jQuery validation call, as J Cooper suggested:

$(...).validate({
    errorPlacement: function(error, element) {
        error.insertBefore(element);
    }
});

And CSS to style the error (in your stylesheet, or to the individual elements):

label.error {
    /* Move the error above the input element. */
    position: absolute;
    line-height: 1.5em;
    margin-top: -1.5em;

    background-color: red;
    color: white;
    padding: 0 2px;
}

Related Solutions

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Javascript – How to know which radio button is selected via jQuery

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here's an example:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Best Solution

Related Solutions

Javascript – How to check if an element is hidden in jQuery

Javascript – How to know which radio button is selected via jQuery

Related Question