CODEWITHSUNDEEP
jqueryjquery-validate
arahant
arahant

Reputation: 2203

jQuery Validation plugin - check if field is valid (but not show the validation message)

I am using jQuery validation plugin and have defined a form validation function as shown below. Based on some user action I am running a custom JS function and in that function I just want to check whether the email and phone fields are valid. But I don't want to validate them i.e. I don't want to show the validation errors, I just need to check if their value is valid.

Something like

$('#email').isvalid();

I have checked out the element method of Validator but that validates the element rather than just checking if it's value is valid. So In other words I am looking for a way to run the rules programmatically. Any help is appreciated!

Form validator function below:

var validator = $("#olForm").validate({
    rules: {
        "email": {
             required: true,
             email: true
        },
        "phone": {
             required: true,
             digits: true,
             minlength: 9,
             maxlength: 11
        }
    }
});

Upvotes: 10

Views: 28510

Answers (4)

Dan H
Dan H

Reputation: 3623

There is an undocumented method check() that does this specifically without actually styling the fields or showing any errors:

var validator = $('form').validate();
if( validator.check('#email') ){
  // this field is valid but no styling was applied
}

Upvotes: 7

rnevius
rnevius

Reputation: 27092

There is a handy method called .checkForm() (undocumented as of September 2015), which makes this really easy. Unlike calling .valid(), this won't show form errors when it's called:

// Returns a boolean
$('form').validate().checkForm();

Upvotes: 4

Rob Wilkins
Rob Wilkins

Reputation: 1650

In response to the original jsfiddle, please see this version:

http://jsfiddle.net/33PGQ/23/

This is modified in three ways: firstly, at the bottom, a simple boolean value is set to equal whether both fields are valid (it's then alerted). As each valid() call returns a boolean value, you can simply and easily check the validity of all form elements.

Secondly, the validate option is expanded with a custom showErrors function that has no internal code. This function overrides the default behaviour for the validation errors, so that while the internal validity of the fields can be checked and the validity of the fields is handled, no actual error text is displayed, thereby enabling all the validation rules but eliminating the display of the validation results.

Lastly, though it isn't explicitly requested in the initial question, I added the optional "onsubmit:false" setting, which overrides the validate call's default behaviour of preventing form submission unless all validation rules are successfully checked. This can be removed if you want to prevent submission (I assume you would), but I think it's a useful feature to be aware of. I included it here in case you had a special case where you would want the form to submit even if the form's validation had failed.

It's definitely worth reviewing the options list for validate; there are many ways you can adjust the validator's behaviour to suit exactly what you want.

Upvotes: 9

Mike Robinson
Mike Robinson

Reputation: 25159

Sounds like you're looking for the .valid() method. Note you still have to run validate() against the whole form to initialize the widget.

http://docs.jquery.com/Plugins/Validation/valid

Upvotes: 3

Related Questions