10

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
        }
    }
});
Improve this question
4
  • Quote "I don't want to validate them i.e. just check if their value is valid." ~ Um, that's validation... checking if the field is valid. Please explain more about what you want... saying, "I don't want to validate but I want to check validity" is nonsensical. Commented Sep 18, 2012 at 16:01
  • 1
    @Sparky672 He doesn't want to display the results of validation (e.g. error messages), he just wants to internally check they're correct. Commented Sep 18, 2012 at 16:13
  • 1
    @MikeRobinson, If all that's true, then he needs to say it. I'm not making any assumptions so I'm asking the OP to clarify his poorly worded question. Commented Sep 18, 2012 at 16:16
  • 1
    Yes, I just want to check if the value is valid. I don't want to display validation results Commented Sep 18, 2012 at 16:52

4 Answers 4

Reset to default
9
+50

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Actually I do need messages for the field validations (in case of form submission). I also need to validate the form on submit. But I was ale to use the showErrors function to show errors only if I have set a boolean flag. See jsfiddle.net/dSu3X/5 So..thanks. The bounty is yours!
7

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
}
Improve this answer

1 Comment

Nice! One caveat I encountered is that this does change the validation state of the control to "touched" (my terminology, not theirs). So if you are typing into a blank field that hasn't been automatically validated/styled yet, and you execute the code in this answer, the control will start getting validated/styled upon subsequent keypresses instead of the normal behavior, in which validation/styling is delayed until the field has lost focus for the first time.
4

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();
Improve this answer

1 Comment

This validates all the form, the op was asking for a specific field.
3

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

Improve this answer

3 Comments

It says validate() needs to be called on the form before checking it using this method. So I assume it won't work if I call it before validating the whole form at least once?
Check out jsfiddle.net/33PGQ/19 The valid method is also firing the validation, which is somewhat opposite of what is claimed in the documentation.
Check jsfiddle.net/33PGQ/21 The valid method also does return the correct value before the $("#form1").validate method is called. This is again opposite of what is claimed in documentation!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.