MVC 5 - Validate a specific field on client-side

Question

I want to populate a city/state drop down list based on the postal code a user types into a textbox. So when the text changes, I'm going to make an ajax call to retrieve the data. However, I only want to perform that ajax request for valid postal codes. The field already validates using the DataAnnotations.RegularExpression attribute and jquery.validate.unobtrusive validation library. I'm unclear on what can and can't be used from jquery.validate when using unobtrusive. I've looked at the unobtrusive code, but haven't gotten an understanding of it yet. So two questions:

Using javascript,

1. is there a way to force validation on a specific field, not the whole form?
2. is there a way to check whether a specific field is valid?

Answer 1

After digging around in the source code, I've come to these conclusions. First, the purpose of unobtrusive is to wire up the rules and messages, defined as data- attributes on the form elements by MVC, to jQuery.validation. It's for configuring/wiring up validation, not a complete wrapper around it, so when it comes to performing validation that is already set up, you don't have to worry about "circumventing", or not involving, unobtrusive.

So to answer the questions:

1. Yes, there are two ways. The Validator.element(element) function and the $.fn.valid() extension method. .valid actually calls Validator.element internally. The difference is .valid works on a jQuery which allows you to perform the validation on one or more fields (or the form itself). Validator.element performs validation on only a single element and requires you to have an instance of the validator object. Although the documentation states .validate() "validates the selected form", it actually appears to initialize validation for the form, and if it has already been called, it simply returns the validator for the form. So here are examples of two ways to validate an input (below #2).

2. Yes, but not without also performing the validation. Both of the methods from #1 return a boolean so you can use them to determine whether a field is valid. Unfortunately there doesn't appear to be anything exposed by the library that allows you to check the validation without, in effect, showing or hiding the validation message. You would have to get at and run the rule(s) for the field from your code, which may be possible, but my need didn't justify spending the time on it.

Example:

<form>
    <input id="txtDemo" type="text"></input>
</form>
...    
<script type="text/javascript">
    $("#txtDemo").valid();

    //or

    //Get the form however it makes sense (probably not like this)
    var validator = $("form").validate();

    //Note: while .element can accept a selector, 
    //it will only work on the first item matching the selector.
    validator.element("#txtDemo");
</script>

Answer 2

you can find if a single field is valid and trigger this validation this way: $("#myform").validate().element("#elem1");

details here http://docs.jquery.com/Plugins/Validation/Validator/element#element

Answer 3

Use like this:

$('#Create').on('click', function () {
  var form = $('#test').closest('form');

  $(form).validate();

  if (!$(form).valid()) {
    return
  } else {
    // Bide the data 
  }
});

Hope it works for you