I wanted to add to Robert's answer that you can do this in the default settings by using [`setDefaults()`][1] so it doesn't rely on tapping into the actual instance of the validate method (which is not typically exposed with unobtrusive validation).

Just override the [`onfocusout`][2] property with a function that always evaluates the blurred element by calling the [`valid()`][3] method:



    // enable eager evaluation
    $.validator.setDefaults({
        onfocusout: function (element) {
            $(element).valid();
        }
    })


**Demo With Eager Evaluation**:   
<sup>(Will show required after tab out)</sup>





    // enable eager evaluation
    $.validator.setDefaults({
      onfocusout: function (element) {
        $(element).valid();
      }
    });

    $("form").validate();



    input.error {
      border-color: red
    }



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

    <form >
      <input type="text" name="Name" required /><br/>
      <input type="text" name="Email" required /><br/>
      <input type="submit" value="Submit"/>
    </form>



**Normal Demo**   
<sup>(Won't show required until submit)</sup>





    $("form").validate();



    input.error {
      border-color: red
    }



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

    <form >
      <input type="text" name="Name" required /><br/>
      <input type="text" name="Email" required /><br/>
      <input type="submit" value="Submit"/>
    </form>



[1]: http://jqueryvalidation.org/jQuery.validator.setDefaults
[2]: http://jqueryvalidation.org/validate#onfocusout
[3]: http://jqueryvalidation.org/valid

I'm using the Jquery Validation plugin on a project.

By default, the plugin validates input when the submit button is clicked. The behavior is "lazy" in order to be unobtrusive to the user. If an error is found, the validation then becomes "eager" and validates input as the user corrects the offending entries.

Is there any way to override the initial "lazy" behavior through an option? I can't find any solution in the documentation.

Example:

If you look at this [demo][1], you will notice that the user can navigate through the form leaving empty text boxes that will fail validation when the user clicks on submit. If the user initially enters an invalid email address on the email textbox, it is not highlighted until the submit button is clicked. 
After that, the input is validated on each key press and blur event. That is what I'd like to activate from the start.

I understand the design choice of the plugin creator, but I need different behavior.


  [1]: http://jquery.bassistance.de/validate/demo/

Jquery Validation Plugin - can you enable "eager" validation from the options?

You can enable eager evaluation by using [`setDefaults()`][1] to override the [`onfocusout`][2] property with a function that always evaluates the blurred element by calling the [`valid()`][3] method.



    // enable eager evaluation
    $.validator.setDefaults({
        onfocusout: function (element) {
            $(element).valid();
        }
    })


**Demo With Eager Evaluation**:   
<sup>(Will show required after tab out)</sup>





    // enable eager evaluation
    $.validator.setDefaults({
      onfocusout: function (element) {
        $(element).valid();
      }
    });

    $("form").validate();



    input.error {
      border-color: red
    }



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

    <form >
      <input type="text" name="Name" required /><br/>
      <input type="text" name="Email" required /><br/>
      <input type="submit" value="Submit"/>
    </form>



**Normal Demo**   
<sup>(Won't show required until submit)</sup>





    $("form").validate();



    input.error {
      border-color: red
    }



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

    <form >
      <input type="text" name="Name" required /><br/>
      <input type="text" name="Email" required /><br/>
      <input type="submit" value="Submit"/>
    </form>




[1]: http://jqueryvalidation.org/jQuery.validator.setDefaults
[2]: http://jqueryvalidation.org/validate#onfocusout
[3]: http://jqueryvalidation.org/valid

How do I call the validation when the textbox looses focus? Eg.

    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
    }

    public class RegisterViewModel
    {
        [Required]
        [StringLength(5)]
        public string Name { get; set; }
    }

Also, How can I check if the name exist already by calling an action?

ASP.NET MVC 3 validation on blur

## The Problem 

Validation Attributes have two environments they can validate against:

1. Server
2. Client

### Server Validation - Multiple Attributes Easy
If you have any attribute with:



<pre><code>[AttributeUsage(AttributeTargets.Property, <b>AllowMultiple = true</b>)]
public class RequiredIfAttribute : <b>ValidationAttribute</b></code></pre>

And have put it on your class property like this:

<pre><code>public class Client
{
    public short ResidesWithCd { get; set; };

    <b>[RequiredIf(nameof(ResidesWithCd), new[] { 99 }, "Resides with other is required.")]</b>
    public string ResidesWithOther { get; set; }
}</code></pre>


Then anytime the **Server** goes to [validate an object][1] (ex. `ModelState.IsValid`), it will check every [`ValidationAttribute`][2] on each property and call [`.IsValid()`][3] to determine validity.  This will work fine, even if <code><a href="https://msdn.microsoft.com/en-us/library/System.AttributeUsageAttribute" title="System.AttributeUsageAttribute">AttributeUsage</a>.<a href="https://msdn.microsoft.com/en-us/library/System.AttributeUsageAttribute.AllowMultiple" title="System.AttributeUsageAttribute.AllowMultiple">AllowMultiple</a></code>  is set to true.

### Client Validation - HTML Attribute Bottleneck

If you enable client side by implementing [`IClientValidatable`][4] like this:



<pre><code>public IEnumerable&lt;ModelClientValidationRule&gt; GetClientValidationRules(ModelMetadata metadata, ControllerContext context)    
{
    var modelClientValidationRule = new ModelClientValidationRule
    {
        ValidationType = <b>"requiredif"</b>,
        ErrorMessage = ErrorMessageString
    };
    modelClientValidationRule.ValidationParameters.Add(<b>"target"</b>, prop.PropName);
    modelClientValidationRule.ValidationParameters.Add(<b>"values"</b>, prop.CompValues);

    return new List&lt;ModelClientValidationRule&gt; { modelClientValidationRule };
}
</code></pre>

Then ASP.NET will emit the following HTML when generated:  

<sup>(As long as <code><a href="https://msdn.microsoft.com/en-us/library/System.Web.Mvc.ViewContext.ClientValidationEnabled" title="System.Web.Mvc.ViewContext.ClientValidationEnabled">ClientValidationEnabled</a></code> &
<code><a href="https://msdn.microsoft.com/en-us/library/System.Web.Mvc.ViewContext.UnobtrusiveJavaScriptEnabled" title="System.Web.Mvc.ViewContext.UnobtrusiveJavaScriptEnabled">UnobtrusiveJavaScriptEnabled</a></code> are enabled)</sup>



<pre><code>&lt;input class="form-control" type="text" value=""
       id="Client_CommunicationModificationDescription" 
       name="Client.CommunicationModificationDescription" 
       <i><b>data-val="true"</b>
       <b>data-val-requiredif</b>="Communication Modification Description is required."
       <b>data-val-requiredif-target</b>="CommunicationModificationCd"
       <b>data-val-requiredif-values</b>="99" &gt;</i>
</code></pre>

Data Attributes are the only vehicle we have for dumping rules into the client side validation engine which will search for any attributes on the page via a built in or custom **adapter**. And once part of the set of client side rules, it'll be able to determine the validity of each parsed rule with a built in or custom **method**.

So we can call jQuery Validate Unobtrusive to look for and parse these attributes by **adding a custom adapter** which will add a validation rule to the engine:

<pre><code>// hook up to client side validation
$.validator.unobtrusive.adapters.add(<b>'requiredif'</b>, [<b>'target'</b>, <b>'values'</b>], function (options) {
    options.rules[<b>"requiredif"</b>] = {
        id: '#' + options.params.<b>target</b>,
        values: JSON.parse(options.params.<b>values</b>)
    };
    options.messages['requiredif'] = options.<b>message</b>;
});
</code></pre>


We can then tell that rule how function and determine validity by adding a custom method like this which will add a custom way to evaluate `requiredif` rules (as opposed to date rules or regex rules) which will rely on the parameters we loaded earlier through the adapter:

<pre><code>// test validity
$.validator.addMethod(<b>'requiredif'</b>, function (value, element, params) {
    var targetHasCondValue = targetElHasValue(params.id, params.value);
    var requiredAndNoValue = targetHasCondValue && !value; // true -> :(
    var passesValidation = !requiredAndNoValue;            // true -> :)
    return passesValidation;
}, '');
</code></pre>

Which all operates like this:

[![IClientValidatable][5]][5]


# Solution

So, what have we learned?  Well, if we want the same rule to appear multiple times on the same element, the adapter would have to see the exact set of rules multiple times per element, with no way to differentiate between each instance within multiple sets.  Further, ASP.NET won't render the same attribute name multiple times since it's not valid html.

So, we either need to:

1. Collapse all the client side rules into a single *mega* attribute with all the info
2. Rename attributes with each instance number and then find a way to parse them in sets.

I'll explore **Option One** (emitting a single client side attribute), which you could do a couple ways:

1. Create a single Attribute that takes in multiple elements to validate on the server client
2. Keep multiple distinct server side attributes and then merge all attributes via reflection before emitting to the client

In either case you will have to re-write the client side logic (adapter/method) to take an array of values, instead of a single value at a time.

To we'll build/transmit a JSON serialized object that looks like this:



    var props = [
      {
        PropName: "RoleCd",
        CompValues: ["2","3","4","5"]
      },
      {
        PropName: "IsPatient",
        CompValues: ["true"]
      }
    ]


### `Scripts/ValidateRequiredIfAny.js`

Here's how we'll handle that in client side adapter / method:



    // hook up to client side validation
    $.validator.unobtrusive.adapters.add("requiredifany", ["props"], function (options) {
        options.rules["requiredifany"] = { props: options.params.props };
        options.messages["requiredifany"] = options.message;
    });
    
    // test validity
    $.validator.addMethod("requiredifany", function (value, element, params) {
        var reqIfProps = JSON.parse(params.props);
        var anytargetHasValue = false;
    
        $.each(reqIfProps, function (index, item) {
            var targetSel = "#" + buildTargetId(element, item.PropName);
            var $targetEl = $(targetSel);
            var targetHasValue = elHasValue($targetEl, item.CompValues);
           
            if (targetHasValue) {
                anytargetHasValue = true;
                return ;
            }
        });
    
        var valueRequired = anytargetHasValue;
        var requiredAndNoValue = valueRequired && !value; // true -> :(
        var passesValidation = !requiredAndNoValue;       // true -> :)
        return passesValidation;
    
    }, "");

    // UTILITY METHODS

    function buildTargetId(currentElement, targetPropName) {
        // https://stackoverflow.com/a/39725539/1366033
        // we are only provided the name of the target property
        // we need to build it's ID in the DOM based on a couple assumptions
        // derive the stacking context and depth based on the current element's ID/name
        // append the target property's name to that context
    
                                                    // currentElement.name i.e. Details[0].DosesRequested
        var curId = currentElement.id;              // get full id         i.e. Details_0__DosesRequested
        var context = curId.replace(/[^_]+$/, "");  // remove last prop    i.e. Details_0__
        var targetId = context + targetPropName;    // build target ID     i.e. Details_0__OrderIncrement
    
        // fail noisily
        if ($("#" + targetId).length === 0)
            console.error(
                "Could not find id '" + targetId +
                "' when looking for '" + targetPropName +
                "'  on originating element '" + curId + "'");
    
        return targetId;
    }

    function elHasValue($el, values) {
        var isCheckBox = $el.is(":checkbox,:radio");
        var isChecked = $el.is(":checked");
        var inputValue = $el.val();
        var valueInArray = $.inArray(String(inputValue), values) > -1;
    
        var hasValue = (!isCheckBox || isChecked) && valueInArray;
    
        return hasValue;
    };

### `Models/RequiredIfAttribute.cs`

On the server side, we'll validate attributes like normal, but when we got to build the client side attributes, we'll look for all attributes and build one mega attribute



    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Reflection;
    using System.Web.Helpers;
    using System.Web.Mvc;

    [AttributeUsage(AttributeTargets.Property, AllowMultiple = true)]
    public class RequiredIfAttribute : ValidationAttribute, IClientValidatable
    {

        public PropertyNameValues TargetProp { get; set; }

        public RequiredIfAttribute(string compPropName, string[] compPropValues, string msg) : base(msg)
        {
            this.TargetProp = new PropertyNameValues()
            {
                PropName = compPropName,
                CompValues = compPropValues
            };
        }
        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            PropertyInfo compareProp = validationContext.ObjectType.GetProperty(TargetProp.PropName);
            var compPropVal = compareProp.GetValue(validationContext.ObjectInstance, null);
            string compPropValAsString = compPropVal?.ToString().ToLower() ?? "";
            var matches = TargetProp.CompValues.Where(v => v == compPropValAsString);
            bool needsValue = matches.Any();

            if (needsValue)
            {
                if (value == null || value.ToString() == "" || value.ToString() == "0")
                {
                    return new ValidationResult(FormatErrorMessage(null));
                }
            }

            return ValidationResult.Success;
        }


        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            // at this point, who cares that we're on this particular instance - find all instances
            PropertyInfo curProp = metadata.ContainerType.GetProperty(metadata.PropertyName);
            RequiredIfAttribute[] allReqIfAttr = curProp.GetCustomAttributes<RequiredIfAttribute>().ToArray();

            // emit validation attributes from all simultaneously, otherwise each will overwrite the last
            PropertyNameValues[] allReqIfInfo = allReqIfAttr.Select(x => x.TargetProp).ToArray();
            string allReqJson = Json.Encode(allReqIfInfo);

            var modelClientValidationRule = new ModelClientValidationRule
            {
                ValidationType = "requiredifany",
                ErrorMessage = ErrorMessageString
            };

            // add name for jQuery parameters for the adapter, must be LOWERCASE!
            modelClientValidationRule.ValidationParameters.Add("props", allReqJson);

            return new List<ModelClientValidationRule> { modelClientValidationRule };
        }
    }

    public class PropertyNameValues
    {
        public string PropName { get; set; }
        public string[] CompValues { get; set; }
    }


Then we can bind that to our model by applying multiple attributes simultaneously:



    [RequiredIf(nameof(RelationshipCd), new[] { 1,2,3,4,5 }, "Mailing Address is required.")]
    [RequiredIf(nameof(IsPatient), new[] { "true" },"Mailing Address is required.")]
    public string MailingAddressLine1 { get; set; }

**Further Reading**

* [ASP.NET MVC custom multiple fields validation][6] by [Stephen Muecke][7]
* [Unobtrusive Client Validation in ASP.NET MVC 3][8] by [Brad Wilson][9]



[1]: https://stackoverflow.com/a/28433753/1366033
[2]: https://msdn.microsoft.com/en-us/library/System.ComponentModel.DataAnnotations.ValidationAttribute "System.ComponentModel.DataAnnotations.ValidationAttribute"
[3]: https://msdn.microsoft.com/en-us/library/System.ComponentModel.DataAnnotations.ValidationAttribute.IsValid "System.ComponentModel.DataAnnotations.ValidationAttribute.IsValid"
[4]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.IClientValidatable "System.Web.Mvc.IClientValidatable"
[5]: https://i.stack.imgur.com/ctjB0.png
[6]: https://stackoverflow.com/a/42036235/1366033
[7]: https://stackoverflow.com/users/3559349/stephen-muecke
[8]: http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
[9]: https://stackoverflow.com/users/1554/brad-wilson

[99a]: https://msdn.microsoft.com/en-us/library/System.AttributeUsageAttribute "System.AttributeUsageAttribute"
[99b]: https://msdn.microsoft.com/en-us/library/System.AttributeUsageAttribute.AllowMultiple "System.AttributeUsageAttribute.AllowMultiple"
[99c]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.ViewContext.ClientValidationEnabled "System.Web.Mvc.ViewContext.ClientValidationEnabled"
[99d]: https://msdn.microsoft.com/en-us/library/System.Web.Mvc.ViewContext.UnobtrusiveJavaScriptEnabled "System.Web.Mvc.ViewContext.UnobtrusiveJavaScriptEnabled"

How can I use Same Custom Validation Attribute Multiple Times on Same Field or simply enable AllowMultiple=true, for both server side and client side validation??

I have a following Custom Validation Attribute:

    [AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, 
            AllowMultiple = true, Inherited = true)]
    public class RequiredIfAttribute : ValidationAttribute,IClientValidatable
    {
        public RequiredIfAttribute(string dependentProperties, 
         string dependentValues = "",
         string requiredValue = "val")
         {
         }
    }

Where in dependentProperties I can specify multiple dependant properties seperated by comma, in dependentValues I can specify for which values of dependant properties validation should process and finally in requiredValue I can specify expected value for the field to be validated.

In my model there are two properties LandMark, PinCode and I want to use validation as follows:

    public string LandMark { get; set; }
    [RequiredIf("LandMark","XYZ","500500")]
    [RequiredIf("LandMark", "ABC", "500505")]
    public string PinCode { get; set; }

The values here are just for example, as per it seems I can add the attribute multiple times and don't get any compile error, I have implemented TypeID in attribute and it works well from serverside if I remove client validation from it. But when I am implementing IClientValidatable on the attribute, it gives me an error:

"Validation type names in unobtrusive client validation rules must be unique."

Any help how can I solve it??


Custom Validation Attribute Multiple Times on same field

From my answer on [add class to parent div if validation error occurs using jquery validation](https://stackoverflow.com/a/39737510/1366033) because I believe it adds value to the existing answers on this question ...

# Access Validator Settings

The first order of business is to modify the `settings` object on your form's validator. You can do this in any of the following ways:

1. Before the form is loaded for all forms by calling [`jQuery.validator.setDefaults()`][setDefaults]
2. When initializing the form by passing in options on [`.validate([options])`][validate method]
3. After initialization by locating the validator object on the form with [`$("form").data("validator").settings`][validator object]

Since you're using MVC, option #2 is out of the question since [unobtrusive-validation][unobtrusive] will automatically initialize the form.  So let's use option 3 going forward - the goal here is just to be able to customize the settings on the form.

# Override Default Behavior

The default methods we'll want to modify are [`highlight`][highlight] and [`unhighlight`][unhighlight] which will *highlight* invalid fields or revert changes made by the highlight option, respectively.  Here's their default behavior [according to the source code][source]:



    highlight: function( element, errorClass, validClass ) {
		if ( element.type === "radio" ) {
			this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
		} else {
			$( element ).addClass( errorClass ).removeClass( validClass );
		}
	},
	unhighlight: function( element, errorClass, validClass ) {
		if ( element.type === "radio" ) {
			this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
		} else {
			$( element ).removeClass( errorClass ).addClass( validClass );
		}
	}


So you have a couple options here as well.

1. Completely replace those functions and write them on your own
2. Wrap those functions and call them like normal but add your own custom code before or after. 

### Option 1 - Replace Wholesale

This route is pretty easy. Just write whatever you want in there.  Maybe seed from the source code, maybe do your own thing.



    var valSettings = $("form").data("validator").settings
    valSettings.highlight = function(element, errorClass, validClass) { ... }
    valSettings.unhighlight = function(element, errorClass, validClass) { ... }


### Option 2 - Wrap Functions

This is less intrusive so probably preferable in most cases.


Since ultimately you will be replacing the value of `valSettings.highlight`, you'll need access to a clean pristine version of the original function.  You can save your own or grab one off the global defaults

    // original highlight function
    var highlightOriginal = $("form").data("validator").settings.highlight;
    var highlightDefaults = $.validator.defaults.highlight

In terms of wrapping JavaScript functions, there are a couple examples [here][wrap 1], [here][wrap 2], and [here][wrap 3]).  Here's a parsed down example from one of those, that will help bind `this` context across function calls, preserve the arity of the arguments being passed, and persist the return value:



    function wrap(functionToWrap, beforeFunction) {
        return function () {
            var args = Array.prototype.slice.call(arguments),
            beforeFunction.apply(this, args);
            return functionToWrap.apply(this, args);
        };
    };




Then you'll also have to quickly define whatever additional behavior you want to fire whenever the call is made.  In this case, let's find the closest parent `div` to the element and update it's classes like this:

    function highlightDecorator(element, errorClass, validClass) {
        $(element).closest("div").addClass(errorClass).removeClass(validClass);
    }

**Wrapping It All Up** <sup>(see what I did there)</sup>



    $(function () {
      var valSettings = $("form").data("validator").settings
      valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
      valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
    });
    
    function wrap(functionToWrap, beforeFunction) {
      return function () {
        var args = Array.prototype.slice.call(arguments);
        beforeFunction.apply(this, args);
        return functionToWrap.apply(this, args);
      };
    };
    
    function highlightDecorator(element, errorClass, validClass) {
      $(element).closest("div").addClass(errorClass).removeClass(validClass);
    }
    function unhighlightDecorator(element, errorClass, validClass) {
      $(element).closest("div").addClass(validClass).removeClass(errorClass);
    }

So when we combine all of the above functions, it should look something like this:


## Working Demo in Stack Snippets and [jsFiddle][jsFiddle]






    $(function () {
      var valSettings = $("form").data("validator").settings
    	valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
      valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
    });

    function wrap(functionToWrap, beforeFunction) {
      return function () {
        var args = Array.prototype.slice.call(arguments);
        beforeFunction.apply(this, args);
        return functionToWrap.apply(this, args);
      };
    };

    function highlightDecorator(element, errorClass, validClass) {
      $(element).closest("div").addClass(errorClass).removeClass(validClass);
    }
    function unhighlightDecorator(element, errorClass, validClass) {
      $(element).closest("div").addClass(validClass).removeClass(errorClass);
    }



    input.input-validation-error  {
      border: solid 1px red;
    }
    .input-validation-error label {
      color: red;
    }



    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
        
    <form action="/Person" method="post">
      
      <div class="required">
        <label for="Name">Name <em>*</em></label>           
        <input id="Name" name="Name" type="text" value="" 
               data-val="true" data-val-required="The Name field is required."/>
        <span class="field-validation-valid" 
              data-valmsg-for="Name" data-valmsg-replace="true"></span>
      </div>
      
      <input type="submit" value="Save" />
      
    </form>



 

[setDefaults]: https://jqueryvalidation.org/jQuery.validator.setDefaults/
[highlight]: https://jqueryvalidation.org/validate/#highlight
[unhighlight]: https://jqueryvalidation.org/validate/#unhighlight
[validate method]: https://jqueryvalidation.org/validate/
[unobtrusive]: https://github.com/aspnet/jquery-validation-unobtrusive
[source]: https://github.com/jquery-validation/jquery-validation/blob/1.16.0/src/core.js#L312
[validator object]: https://stackoverflow.com/a/4764443/1366033

[wrap 1]:https://stackoverflow.com/a/5259530/1366033
[wrap 2]:https://stackoverflow.com/a/326693/1366033
[wrap 3]:https://blog.sentry.io/2016/02/03/wrap-javascript-functions.html

[jsFiddle]: https://jsfiddle.net/KyleMit/p2qpn8kg/

I am using the jQuery Validate plugin, and can never find a good way to display errors for checkboxes.  I'd like to highlight all of the checkbox labels in red if none are selected, and decide to do this by adding an error class to the div that contains the checkboxes and checkbox labels.  However, it doesn't seem to be adding the class.  Am I not selecting the div correctly?

HTML:

    <div class="left-aligned indent">

        <label id="id_label" for="id" class="label">Items:</label>

        <div class="select-group">

            <input type="checkbox" name="items" value="1" id="item_1" />
            <label class="checkbox">Item #1</label><br />
            
            <input type="checkbox" name="items" value="1" id="item_2" />
            <label class="checkbox">Item #2</label><br />
           
            <input type="checkbox" name="items" value="1" id="item_3" />
            <label class="checkbox">Item #3</label><br />

        </div>

    </div>

Javascript:

    $().ready(function() {
    	
    	$('#addForm').validate({
    		rules: { 
                "items": { 
    				required: true, 
    				minlength: 1 
                } 
       		}, 
    		errorPlacement: function(error, element) {
                if (element.is(':checkbox')) {
                    $(this).prev("div").addClass('checkbox-error');
                }
                else {
                     return true;
                }
             }
    	});	
    	
    	
    });

CSS:

    .error {
    	background-color: #FF898D;
    	border: 1px solid #000;
    }
    
    .checkbox-error {
    	color: #FF898D;
    }

jQuery Validate - Add Error Class to Parent Div

# Access Validator Settings

The first order of business is to modify the `settings` object on your form's validator. You can do this in any of the following ways:

1. Before the form is loaded for all forms by calling [`jQuery.validator.setDefaults()`][setDefaults]
2. When initializing the form by passing in options on [`.validate([options])`][validate method]
3. After initialization by locating the validator object on the form with [`$("form").data("validator").settings`][validator object]

Since you're using MVC, option #2 is out of the question since [unobtrusive-validation][unobtrusive] will automatically initialize the form.  So let's use option 3 going forward - the goal here is just to be able to customize the settings on the form.

# Override Default Behavior

The default methods we'll want to modify are [`highlight`][highlight] and [`unhighlight`][unhighlight] which will *highlight* invalid fields or revert changes made by the highlight option, respectively.  Here's their default behavior [according to the source code][source]:



    highlight: function( element, errorClass, validClass ) {
		if ( element.type === "radio" ) {
			this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
		} else {
			$( element ).addClass( errorClass ).removeClass( validClass );
		}
	},
	unhighlight: function( element, errorClass, validClass ) {
		if ( element.type === "radio" ) {
			this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
		} else {
			$( element ).removeClass( errorClass ).addClass( validClass );
		}
	}


So you have a couple options here as well.

1. Completely replace those functions and write them on your own
2. Wrap those functions and call them like normal but add your own custom code before or after. 

### Option 1 - Replace Wholesale

This route is pretty easy. Just write whatever you want in there.  Maybe seed from the source code, maybe do your own thing.



    var valSettings = $("form").data("validator").settings
    valSettings.highlight = function(element, errorClass, validClass) { ... }
    valSettings.unhighlight = function(element, errorClass, validClass) { ... }


### Option 2 - Wrap Functions

This is less intrusive so probably preferable in most cases.


Since ultimately you will be replacing the value of `valSettings.highlight`, you'll need access to a clean pristine version of the original function.  You can save your own or grab one off the global defaults

    // original highlight function
    var highlightOriginal = $("form").data("validator").settings.highlight;
    var highlightDefaults = $.validator.defaults.highlight

In terms of wrapping JavaScript functions, there are a couple examples [here][wrap 1], [here][wrap 2], and [here][wrap 3]).  Here's a parsed down example from one of those, that will help bind `this` context across function calls, preserve the arity of the arguments being passed, and persist the return value:



    function wrap(functionToWrap, beforeFunction) {
        return function () {
            var args = Array.prototype.slice.call(arguments),
            beforeFunction.apply(this, args);
            return functionToWrap.apply(this, args);
        };
    };




Then you'll also have to quickly define whatever additional behavior you want to fire whenever the call is made.  In this case, let's find the closest parent `div` to the element and update it's classes like this:

    function highlightDecorator(element, errorClass, validClass) {
        $(element).closest("div").addClass(errorClass).removeClass(validClass);
    }

**Wrapping It All Up** <sup>(see what I did there)</sup>



    $(function () {
      var valSettings = $("form").data("validator").settings
      valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
      valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
    });
    
    function wrap(functionToWrap, beforeFunction) {
      return function () {
        var args = Array.prototype.slice.call(arguments);
        beforeFunction.apply(this, args);
        return functionToWrap.apply(this, args);
      };
    };
    
    function highlightDecorator(element, errorClass, validClass) {
      $(element).closest("div").addClass(errorClass).removeClass(validClass);
    }
    function unhighlightDecorator(element, errorClass, validClass) {
      $(element).closest("div").addClass(validClass).removeClass(errorClass);
    }

So when we combine all of the above functions, it should look something like this:


## Working Demo in Stack Snippets and [jsFiddle][jsFiddle]






    $(function () {
      var valSettings = $("form").data("validator").settings
    	valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
      valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
    });

    function wrap(functionToWrap, beforeFunction) {
      return function () {
        var args = Array.prototype.slice.call(arguments);
        beforeFunction.apply(this, args);
        return functionToWrap.apply(this, args);
      };
    };

    function highlightDecorator(element, errorClass, validClass) {
      $(element).closest("div").addClass(errorClass).removeClass(validClass);
    }
    function unhighlightDecorator(element, errorClass, validClass) {
      $(element).closest("div").addClass(validClass).removeClass(errorClass);
    }



    input.input-validation-error  {
      border: solid 1px red;
    }
    .input-validation-error label {
      color: red;
    }



    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
        
    <form action="/Person" method="post">
      
      <div class="required">
        <label for="Name">Name <em>*</em></label>           
        <input id="Name" name="Name" type="text" value="" 
               data-val="true" data-val-required="The Name field is required."/>
        <span class="field-validation-valid" 
              data-valmsg-for="Name" data-valmsg-replace="true"></span>
      </div>
      
      <input type="submit" value="Save" />
      
    </form>



 

[setDefaults]: https://jqueryvalidation.org/jQuery.validator.setDefaults/
[highlight]: https://jqueryvalidation.org/validate/#highlight
[unhighlight]: https://jqueryvalidation.org/validate/#unhighlight
[validate method]: https://jqueryvalidation.org/validate/
[unobtrusive]: https://github.com/aspnet/jquery-validation-unobtrusive
[source]: https://github.com/jquery-validation/jquery-validation/blob/1.16.0/src/core.js#L312
[validator object]: https://stackoverflow.com/a/4764443/1366033

[wrap 1]:https://stackoverflow.com/a/5259530/1366033
[wrap 2]:https://stackoverflow.com/a/326693/1366033
[wrap 3]:https://blog.sentry.io/2016/02/03/wrap-javascript-functions.html

[jsFiddle]: https://jsfiddle.net/KyleMit/p2qpn8kg/

I have the following markup for my input fields:



    <div class="required">
        <label for="Name">Name <em>*</em></label>		    
		<div class="input large">
            @Html.TextBoxFor(m => m.Name)
            @Html.ValidationMessageFor(m => m.Name)
        </div>
    </div>

Using the jquery validation plugin if an error occurs then it will add a span below the input and also apply a class to the input itself so that the error can be styled. What I also want to do is add a class to the parent div with a class of required. So for example if an error happens it will be `<div class="required error">` and then when fixed `<div class="required valid">` in relation to the classes that are applied to the field and removal of the error span.

How would I do this? I've looked at the documentation site but haven't seen anything to do with adding a class to a parent div.


I've though about doing something like:



    if ($('input').hasClass('valid')) {
        $(this).parents('div.required').addClass('valid');

    } else if ($('input').hasClass('input-validation-error')) {
        $(this).parents('div.required').addClass('error');
    }

but how can I run it sequence with the validation? Like when an error takes place or a field becomes valid.

Add class to parent div if validation error occurs using jquery validation

I am using Twitter's Bootstrap as my framework for a project I am working on. I am attempting to validate a simple contact form using the jQuery Validate plugin but it's causing some headaches.

I'm looking to add an *Error* or *Valid* class to the **parent div** of each form's input. Here's my form code:

     <form id="msg-form" class="">
        <fieldset>
            <div class="input-prepend control-group pull-left">
                <span class="add-on">@</span>
                <input class="span3 required email" id="inputEmail" name="msg-email" type="text" placeholder="example@example.com">
            </div>
            <div class="input-prepend control-group pull-left">
                <span class="add-on"><i class="icon-user"></i></span>
                <input class="span3 required" id="inputName" name="msg-name" type="text" placeholder="Joe Bloggs">
            </div>
            <div class="input-prepend control-group">
                <span class="add-on" style="height: 53px;"><i class="icon-pencil"></i></span>
                <textarea class="span3 required" id="textarea" name="msg-comments" rows="2" style="height: 53px" placeholder="Just say hi, or tell us how we can help"></textarea>
            </div>
            <button type="submit" class="btn pull-right">Submit<i class="icon-chevron-right"></i></button>
        </fieldset>
    </form> 

As you can see my *div.control-group* is the div I want to add the class to. I have attempted to use the **highlight** (as suggested [here][1], but this simply didn't work) & **errorPlacement** (see below) but I'm not doing it correctly.

Ideally I want the class to be added/removed **on keyup** so it keeps the great functionality that the plugin offers. This simple code works, but it does not remove the class & only works on submission of the form:

    $("#msg-form").validate({
        errorPlacement: function(error, element) {
            $(element).parent('div').addClass('error');
        }
    });

Can anyone suggest what option I should be using to achieve this?! 

Thanks in advance -  I can provide any additional details in necessary!


  [1]: https://stackoverflow.com/questions/9929418/jquery-validate-add-class-to-error-element

jQuery Validate: add error or validate class to parent div

BTW, the current answer is deprecated according to the docs on [Skipping validation on submit][1]:

>To skip validation while still using a submit-button, add the attribute `"formnovalidate"` to that input:
>
>
>    
    <input type="submit" name="go" value="Submit">
    <input type="submit" formnovalidate name="cancel" value="Cancel">

>*This used to work by adding `class="cancel"` to the input, this is now deprecated.*

Although, as of version 1.17, both methods still appear in the [source code][2]:

> **`...blob/1.17.0/src/core.js#L34`**:

>
>
    // Allow suppressing validation by adding a cancel class to the submit button
	if ( $( this ).hasClass( "cancel" ) ) {
		validator.cancelSubmit = true;
	}
>
	// Allow suppressing validation by adding the html5 formnovalidate attribute to the submit button
	if ( $( this ).attr( "formnovalidate" ) !== undefined ) {
		validator.cancelSubmit = true;
	}


Further Reading: [jQuery Validation plugin: disable validation for specified submit buttons][3]

[1]:https://jqueryvalidation.org/reference/#link-skipping-validation-on-submit
[2]: https://github.com/jquery-validation/jquery-validation/blob/1.17.0/src/core.js#L34
[3]:https://stackoverflow.com/q/203844/1366033

I have a form that I want to be able to save without validating, but validates on submit. I've got two buttons on this form to either save or submit.

The problem is: if I use a "submit" button to save (and then do a switch on which action in the controller), jquery.validate kicks in and I can't save a partially-filled out form.

If I do it as a link, I don't know how to make the form post to the new action in the controller.

Here's the HTML from the view:
    
    <a class="btn  btn-default" data-placement="right" data-title="Save your progress." href="/Summary/Save/2" rel="tooltip"><i class="glyphicon glyphicon-floppy-disk"></i> Save Summary</a> 
    <a class="btn  btn-default" confirm="Are you sure you want to revert to the previous saved copy? You will lose all changes since your last save." data-placement="right" data-title="Revert back to your last saved copy." href="/Summary/Revert/2" rel="tooltip"><i class="glyphicon glyphicon-remove"></i> Revert Changes</a> 
    <button class="btn-default  btn btn-primary" confirm="This will submit the summary to the evaluator for review. No changes will be allowed unless the evaluator returns it. Are you sure?" type="submit">Submit Summary</button>

MVC bypass client-side validation ("save progress" vs "submit")

Instead of attaching an extra listener to the form submit, you can use the [`submitHandler`][1]:

> Callback for handling the actual submit when the form is valid.  

The default function behaves like this:



    submitHandler: function(form) {
      form.submit();
    }

> **Note**: `form` refers to a DOM element, this way the validation isn't triggered again.

Just pass in a `submitHandler` to `validate()` and add the code to disable the button like this:



    $("form").validate({
      submitHandler: function(form) {
        $(':submit', form).attr('disabled', 'disabled');
        form.submit();
      }
    });

Just be careful doing anything to the form inside of the `submitHandler` callback because it's easy to [trigger a case of infinite recursion][2]


### Here's a demo in Stack Snippets:






    $("form").validate({
      submitHandler: function(form) {
        $(':submit', form).attr('disabled', 'disabled');
        form.submit();
      }
    });

    // show message on invalid submission
    $("form").on("invalid-form.validate", function (event, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        alert('There is a problem with ' + errors + ' fields.');
      }
    });



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

    <form >
      <input type="text" name="Name" required /><br/>
      <input type="text" name="Email" required /><br/>
      <input type="submit" value="Submit"/>
    </form>




[1]: http://jqueryvalidation.org/validate/#submithandler
[2]: http://jqueryvalidation.org/documentation/#link-too-much-recursion

Using [jQuery Validate][1], is there a way to determine if a form is valid *without revalidating* the form.

Per this question on [how to add a 'submitHandler' function when using jQuery Unobtrusive Validation?][2], I'm listening to the `invalid-form.validate` event to show the user a custom error when the form has been validated and has errors.

Per this question on how to [prevent double click on submit][3], I'm disabling the submit button once the form has been submitted, but only if the form is valid, so the user can take corrective action and resubmit once the form is cleaned up.

The problem is now `invalid-form.validate` fires twice.

Since the `invalid-form.validate` event fires before my form submission handler, I'll already know the number of errors.  Does the [`.valid()`][4] method persist the number of errors somewhere that I can check against that value instead of revalidating the form.  

Here's an example in stack snippets.  Hit submit before filling in the required fields and you'll see two error messages.





    $("form").validate();

    // show message on invalid submission
    $("form").on("invalid-form.validate", function (event, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        alert('There is a problem with ' + errors + ' fields.');
      }
    });

    // prevent double click form submission
    $('form').submit(function () {
      if ($(this).valid()) {
        $(':submit', this).attr('disabled', 'disabled');
      }
    });




    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

    <form >
      <input type="text" name="Name" required /><br/>
      <input type="text" name="Email" required /><br/>
      <input type="submit" value="Submit"/>
    </form>



I could save them to the the element in my `invalid-form.validate`, but this won't update when the form is valid and also couples my double click code very heavily with my custom error code.  If I take out the custom error code at some later date, I'll have to rewrite the double click prevention. 

Any ideas?


[1]: http://jqueryvalidation.org/
[2]: https://stackoverflow.com/a/4799723/1366033 
[3]: https://stackoverflow.com/a/6435544/1366033
[4]: http://jqueryvalidation.org/valid/

Check if form is valid without re-running jquery validation

`[DataType(DataType.PhoneNumber)]` does not come with any validation logic out of the box.  

According to the [docs][1]: 

> When you apply the `DataTypeAttribute` attribute to a data field you must do the following:
>
> * Issue validation errors as appropriate.

The `[Phone]` Attribute inherits from `[DataType]` and was introduced in .NET Framework 4.5+ and is in .NET Core which does provide it's own flavor of validation logic.  So you can use like this:



    [Phone()]
    public string PhoneNumber { get; set; }

However, the out-of-the-box validation for Phone numbers is [pretty permissive][2], so you might find yourself wanting to inherit from DataType and implement your own `IsValid` method or, as others have suggested here, use a [regular expression][3] & `RegexValidator` to constrain input.

**Note**: Use caution with Regex against unconstrained input per the [best practices][4] as .NET has made the [pivot away from regular expressions in their own internal validation logic for phone numbers][5]

[1]: https://learn.microsoft.com/en-us/dotnet/api/System.ComponentModel.DataAnnotations.DataTypeAttribute?view=netframework-4.7.2
[2]: https://source.dot.net/#System.ComponentModel.Annotations.Tests/System/ComponentModel/DataAnnotations/PhoneAttributeTests.cs
[3]: https://stackoverflow.com/questions/9776231/regular-expression-to-validate-us-phone-numbers
[4]: https://learn.microsoft.com/en-us/dotnet/standard/base-types/best-practices
[5]: https://github.com/Microsoft/dotnet/blob/master/Documentation/compatibility/aspnet-472-compat-doc.md

I am trying to use a regular expression to validate a phone number and return an error when an invalid number or phone number is submitted. 
     
**MVC Code**:



    <ol class="row">
        <li class="cell" style="width: 20%;">Phone Number:</li>
        <li class="cell last" style="width: 60%;">
            @Html.TextBoxFor(model => model.PhoneNumber, new { @class = "textbox" }) 
            @Html.ValidationMessageFor(model => model.PhoneNumber)
        </li>
    </ol>



**C# Code**:



    [DataType(DataType.PhoneNumber)]
    [Display(Name = "Phone Number")]
    [Required(ErrorMessage = "Phone Number Required!")]
    [RegularExpression(@"^$?([0-9]{3})$?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$",
                       ErrorMessage = "Entered phone format is not valid.")]
    public string PhoneNumber { get; set; }



However, the input box will not show a message to the user indicating that the phone number which was submitted is not valid.

Phone Number Validation MVC

It depends on which version you're using.  [As of version 1.9.0][1], `ignore: ":hidden"` is the default option, so it doesn't need to be set explicitly.  Depending on when you were looking at answers or which version you were using, you might see different answers.

In your example, you're using v1.11.0, so hidden elements should be ignored by default.  The [`:hidden`][3] selector includes elements that:

>* have a `display` value of `none`.
* are form elements with `type="hidden"`.
* have width and height are explicitly set to 0.
* have an hidden ancestor, so the element is not shown on the page.

If you want to change that, you need to pass in a different value for [`ignore` in the options object][2].

The point that seems to be causing confusion is at what point the validation check if an element is hidden.  When a form submits, jQuery-Validate will re-check any inputs.  It's at that point that elements in your ignore will be chosen or not.  So if an element is visible by the time you're hitting submit, it will be validated.  

Try running the sample below.  If you submit before the first element has a chance to load, you'll only get a single warning, even though both inputs are required, because the first one is excluded because it's hidden.  Wait until the script shows the first input and try to submit again, and both elements will be included.

### Demo in Stack Snippet





    $(function() {
        
        $('#form').validate({
          ignore: ':hidden'
        });
        
        window.setTimeout(function() {
            $('.hidden').show() 
        }, 4000);
        
    });



    .hidden {
      display: none;



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.min.js"></script>

    <form id="form" >
      <input type="text" id="hidden"  name="hidden" placeholder="Originally Hidden" required="required" class="hidden" /><br/>
      <input type="text" id="visible" name="visible" placeholder="Originally Visible" required="required" /><br/>
      <input type="submit" id="submit" value="submit"/>
    </form>



[1]: https://stackoverflow.com/a/2623531/1366033
[2]: http://jqueryvalidation.org/validate/#ignore
[3]: http://api.jquery.com/hidden-selector/

I've seen bunches of questions about this, but wanted to clarify my understanding. It all started when I was setting up jQuery validation on a popup form. If I added the validate() method while the form wasn't visible, the validation didn't work (straight submit). If I added validation after the form element was visible, all is well... the validate fires and doesn't submit the form.

So, I tried to isolate this behavior and this is what I ended up with:

https://jsfiddle.net/KyleMit/ph8ue5j5/

Here's the HTML:

    <form id="form" style="display: none;">
        <input type="text" name="name" id="name"  placeholder="Name" required="requited" /><br/>
        <input id="submit" class="button" type="submit" value="submit"/>
    </form>


Here's the JS:

    $(function() {
        
        $('#form').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                }
            },
            messages: {
                name: {
                    required: "Please enter your name",
                    minlength: "Name should be more than 2 characters"
                }
            }
        });
        
        window.setTimeout(function() {
            $("#form").show() 
        }, 3000);
        
    });

If you run this, you will see the form is first invisible. Then after 3 seconds, becomes visible. This is the same setup as my popup form.

What surprises me is the validations works! This goes against what I have been reading and what I've witnessed in my web project.

Can anyone explain this?

jQuery Validate Non-Visible Fields

The [answer you linked to][1] tried to solve the problem by listening for changes on buttons and populating a hidden field so that jQuery Validate had something to, well, validate. However, there's a simpler way to do this with native features that already exist in the library.

Bootstrap's button group is just a css wrapper for `input[type=radio]` to make it look pretty, and you can [easily require radio buttons][2] like this:



    myRadioGroupName: { required: true}

or this:



    <input type="radio" name="myRadioGroupName" value="0" required>  1
    <input type="radio" name="myRadioGroupName" value="1" > 2
    <input type="radio" name="myRadioGroupName" value="2" > 3

> **Note**: Make sure you **`name`** all radio button groups.  This ensures the radio buttons work properly in all browsers and that they post back a value with the form correctly. 

Now jQuery Validate will automatically provide field validation messages for your group, but you'll probably want to move them outside of the radio button group.  You can [customize their placement][3] like this:



    <label for="myRadioGroupName" generated="true" class="error"></label>

### Here's a demo in Stack Snippets





    $(function() { 

      $("#test-form").validate({  
        ignore: [],
        rules: {
          first_name: { 
            required: true
          },
          hole1score: {
            required: true
          }
        }
      });
    });



    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <form id="test-form" action="post.php">
      <input type="text" name="first_name" class="form-control" required /><br/>
      
      <div class="btn-group btn-group-justified" data-toggle="buttons" id="hole1score">
        <label class="btn btn-primary btn-responsive">
          <input type="radio" autocomplete="off" name="hole1score" value="1" >1
        </label>
        <label class="btn btn-primary btn-responsive">
          <input type="radio" autocomplete="off" name="hole1score" value="2" >2
        </label>
        <label class="btn btn-primary btn-responsive">
          <input type="radio" autocomplete="off" name="hole1score" value="3">3
        </label>
      </div>

      <label for="hole1score" generated="true" class="error"></label><br/>
      
      <input type="submit" />
    </form>




[1]: https://stackoverflow.com/q/18317193/1366033
[2]: https://stackoverflow.com/q/277589/1366033
[3]: https://stackoverflow.com/q/13200659/1366033

I have a PHP data entry page using a Bootstrap Wizard, and now am adding some data validation with jQuery Validate.

I have got the basic <input> type fields to work properly, simply with "required" attribute.

But the last 9 tabs of the wizard are "btn-groups" which are not input types, so dont have this functionality. To get around a previous issue (and something that seems quite common to be honest) I added a "hidden" input field, and when a btn-group is changed, it sets the value of the hidden field.

But I am unable to perform validation against either the btn-groups or the hidden fields.

I saw the first solution to the following thread:

[Similar Issue][1]


  [1]: https://stackoverflow.com/questions/18317193/jquery-validation-against-twitter-bootstrap-button-group

This seems perfect. However when I plug it into my site, I cannot get the wizard to move from the page before of the wizard (i.e. tab 1) where the first hidden field exists (i.e. tab 2), if i dont pre-set the initial value (which then breaks the validation test!).

Currently, the code looks like below. In the first score tab, "hole1score", I have removed the 'value="0"' and added "required", so it gets the validation. All other tabs have the original syntax with pre-set the value to 0. If I can get past this page in the wizard, I will apply it to all.

    <head>
		
		
    	
		<script src="../js/jquery.validate.min.js"></script>
    	
    	
		<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
		<script>
			$(document).ready(function() {
				var $validator = $("#entry_form").validate({
				  ignore: [],
				  rules: {
					firstname: {
					  required: true,
					}
				  },
				  messages: {
				  	hcap: "A number is required"
				  }
				});	
				
				$('#rootwizard').bootstrapWizard({
					'tabClass': 'nav nav-pills',
					'onNext': function(tab, navigation, index) {
						//if(index>=2) {
						//	//alert($('#hole1score').val());
						//}
						
						var $valid = $("#entry_form").valid();
						if(!$valid) {
							$validator.focusInvalid();
							return false;
						}
					}
				});

				
				
				$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
					var $total = navigation.find('li').length;
					var $current = index+1;
					var $percent = ($current/$total) * 100;
			
					$('#rootwizard .progress-bar').css({width:$percent+'%'});
			
					// If it's the last tab then hide the last button and show the finish instead
					if($current >= $total) {
						$('#rootwizard').find('.pager .next').hide();
						$('#rootwizard').find('.pager .finish').show();
						$('#rootwizard').find('.pager .finish').removeClass('disabled');
					} else {
						$('#rootwizard').find('.pager .next').show();
						$('#rootwizard').find('.pager .finish').hide();
					}
				}});
						
				$(".btn-group :input").change(function() {
    				$('input[name="' + $(this).parent().parent().attr('id') + '"]').val($(this).val());
				}); 
			});
		</script>
		<script>
		  function selectPlayer(myForm)
		  {
			var jplayerid = myForm.playerlist.options[myForm.playerlist.selectedIndex].value;
			var jplayername = myForm.playerlist.options[myForm.playerlist.selectedIndex].text;
			var jplayernames = jplayername.split(" ");
			myForm.firstname.value = jplayernames[0];
			myForm.lastname.value = jplayernames[1];
		  }
    	</script>
    </head>

    <body>

				<div id="rootwizard">
					
					<div class="row">
						<div class="col-xs-12 col-sm-12">
							<div class="navbar">
								<div class="navbar-inner">
									<ul>
										<li><a href="#tab1" data-toggle="tab">Info</a></li>
										<li><a href="#tab2" data-toggle="tab">1st</a></li>
										<li><a href="#tab3" data-toggle="tab">2nd</a></li>
										<li><a href="#tab4" data-toggle="tab">3rd</a></li>
										<li><a href="#tab5" data-toggle="tab">4th</a></li>
										<li><a href="#tab6" data-toggle="tab">5th</a></li>
										<li><a href="#tab7" data-toggle="tab">6th</a></li>
										<li><a href="#tab8" data-toggle="tab">7th</a></li>
										<li><a href="#tab9" data-toggle="tab">8th</a></li>
										<li><a href="#tab10" data-toggle="tab">9th</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-xs-12">
							<div id="bar" class="progress progress-striped active">
								<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
							</div>	
						</div>				
					</div>
					
					<form action="" method="post" class="form" role="form" name="entry_form" id="entry_form" autcomplete="on">
						<div class="tab-content">
							<div class="tab-pane" id="tab1">
								
								<div class="row">
									<div class="col-xs-12">
										<label for="">Name</label>
									</div>
								</div>
								
								<div class="row">
                					<div class="col-xs-12 col-sm-6 col-md-4">
										<select class="form-control" name="playerlist" id="playerlist" onchange="selectPlayer(this.form)">
											<option value="" selected>Select Name or Type New Name</option>
											<?php
												$player_list = get_players();
												echo $player_list;
											?>
										</select>
										<br>                					
                					</div>
                				</div>
                				
                				<div class="row">
									<div class="col-xs-6 col-sm-3 col-md-2">
										<input class="form-control" id="firstname" name="firstname" type="text" required />
									</div>
									<div class="col-xs-6 col-sm-3 col-md-2">
										<input class="form-control" id="lastname" name="lastname" type="text" required />
									</div>
								</div>

								<div class="row">
									<div class="col-xs-12">
										<br>
										<label for="">HCap and Nine</label>
									</div>
								</div>

								<div class="row">
									<div class="col-xs-6 col-sm-3 col-md-2">
										<input class="form-control" name="hcap" placeholder="HCap" type="number" required />
									</div>
									<div class="col-xs-6 col-sm-3 col-md-2">
										<select name="nine" class="form-control" required>
											<option value="">Select Nine</option>
											<option value="1">Low</option>
											<option value="2">Middle</option>
											<option value="3">High</option>
										</select>
									</div>
								</div>
								
								<div class="row">
									<div class="col-xs-12">
										<br>
										<label for="">Date Played</label>
									</div>
								</div>

								<div class="row">
									<div class="col-xs-12 col-sm-6 col-md-4">
										<div class="col-xs-4">
											<select class="form-control" name="dateday">
												<?php
													for ($x = 1; $x <= 31; $x++) {
														if ($todayday==$x){
															$dynday .= '<option value='.$x.' selected>'.$x.'</option>';
														} else {
															$dynday .= '<option value='.$x.'>'.$x.'</option>';
														}
													;
													}
													echo $dynday;
												?>
											</select>
										</div>
										<div class="col-xs-4">
											<select class="form-control" name="datemonth">
												<?php
													for ($x = 1; $x <= 12; $x++) {
														if ($todaymonth==$x){
															$dynmonth .= '<option value='.$x.' selected>'.$x.'</option>';
														} else {
															$dynmonth .= '<option value='.$x.'>'.$x.'</option>';
														}
													};
													echo $dynmonth;
												?>
											</select>
										</div>
										<div class="col-xs-4">
											<select class="form-control" name="dateyear">
												<?php
													$dynyear = '<option value='.$todayyear.' selected>'.$todayyear.'</option>';
													echo $dynyear;
												?>
											</select>
											<br>
										</div>
									</div>
								</div>								
								
							</div>
							
							<div class="tab-pane" id="tab2">
								
								<div class="row">
									<div class="col-xs-12">
										<label for="">HOLE 1 Gross Score</label>										
									</div>
								</div>
								
								<div class="row">
									<div class="col-xs-12 col-sm-9">
										<div class="btn-group btn-group-justified" data-toggle="buttons" id="hole1score">
											<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="0"> Blob
											</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="2">2
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="3">3
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="4">4
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="5">5
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="6">6
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="7">7
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="8">8
										  	</label>
										  	<input type="hidden" name="hole1score" required>
										</div>
									
									</div>								
								</div>
							</div>

							<div class="tab-pane" id="tab3">
								
								<div class="row">
									<div class="col-xs-12">
										<label for="">HOLE 2 Gross Score</label>										
									</div>
								</div>
								
								<div class="row">
									<div class="col-xs-12 col-sm-9">
										<div class="btn-group btn-group-justified" data-toggle="buttons" id="hole2score">
											<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="0"> Blob
											</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="2">2
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="3">3
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="4">4
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="5">5
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="6">6
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="7">7
										  	</label>
										  	<label class="btn btn-primary btn-responsive">
												<input type="radio" autocomplete="off" value="8">8
										  	</label>
										  	<input type="hidden" name="hole2score" value="0">
										</div>
									
									</div>								
								</div>
							</div>

								<div class="row">
									<br>
									<div class="col-xs-4 col-xs-offset-8 col-sm-2 col-sm-offset-7 col-md-offset-8">
										<button name="submit" class="btn btn-responsive btn-success" type="submit">Submit</button>								
									</div>
								</div>
							</div>
							
							<div class="row">
								<div class="col-xs-12">
									<ul class="pager wizard">
										<li class="previous first"><a href="javascript:;">First</a></li>
										<li class="previous first" style="display:none;"><a href="#">First</a></li>
										<li class="previous"><a href="#">Previous</a></li>
										<li class="next last" style="display:none;"><a href="#">Last</a></li>
										<li class="next"><a href="#">Next</a></li>
										<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
									</ul>								
								</div>
							</div>							
							
						</div>
					</form>


				</div>


    </body>

Any help would be appreciated

jQuery validation against twitter bootstrap button group with hidden input

## The Problem

It turns out this happens when you don't include a `@Html.ValidationMessageFor` placeholder for a given form element.

Here's a deeper dive into where the problem occurs:

When a form submits, `jquery.validate.js` will call the following methods:



    validate: function( options ) {
      form: function() {
        showErrors: function(errors) {
          defaultShowErrors: function() {
            showLabel: function(element, message) {
              this.settings.errorPlacement(label, $(element) )
                                            
Where `errorPlacement` will call this method in `jquery.validate.unobtrusive.js`:



    function onError(error, inputElement) { 
       var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
           replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

When we don't add a placeholder for the validation message, `$(this).find(...)` won't find anything.

Meaning `container.attr("data-valmsg-replace")` will return `undefined`

This poses a problem is when we try to call `$.parseJSON` on an undefined value.  If an error is thrown (and not caught), JavaScript will stop dead in its tracks and never reach the final line of code in the original method (`return false`) which prevents the form from submitting.

## The Solution


### Upgrade jQuery Validate Unobtrusive

[Newer versions of jQuery Validate][3] handle this better and check for nulls before passing them to `$.parseJSON`



    function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
            replaceAttrValue = container.attr("data-valmsg-replace"),
            replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

### Add ValidationMessageFor

To address the core problem, for every input on your form, make sure to include:



    @Html.ValidationMessageFor(model => model.Name)

Which will render the following client side markup



    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>





    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
        
    <form action="/Person" method="post">
      <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul><li style="display:none"></li></ul>
      </div>
      <label for="Name">Name</label>
      <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
      <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
      <input type="submit" value="Save" />
    </form>



[3]: https://www.asp.net/ajax/cdn

I have an ASP.NET project that automatically wires up client side validation using [jQuery.Validate][1] and the [unobtrusive wrapper][2] built by ASP.NET.

a) I definitely have the appropriate libraries: [jquery.js][j1], [jquery.validate.js][j2], & [jquery.validate.unobtrusive.js][j3]

b) And the MVC rendering engine is definitely turned on (`ClientValidationEnabled` & `UnobtrusiveJavaScriptEnabled` in the `appSettings` section of the web.config)

Here's a trivial example where things are broken:

**Model**:



    public class Person
    {
        [Required]
        public string Name { get; set; }
    }

**Controller**:

   

    public ActionResult Edit()
    {
        Person p = new Person();
        return View(p);
    }

**View**:

   

    @model validation.Models.Person
    
    @using (Html.BeginForm()) {
        @Html.ValidationSummary(false)
    
        @Html.LabelFor(model => model.Name)
        @Html.EditorFor(model => model.Name)
    }

This generates the following client side markup:





    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
        
    <form action="/Person" method="post">
      <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul><li style="display:none"></li></ul>
      </div>
      <label for="Name">Name</label>
      <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
      <input type="submit" value="Save" />
    </form>



When run it will perform the client side validation, noting that some form elements are invalid, but then *also* post back to the server.  

Why is it not preventing postback on a form with an invalid state?

[1]: https://jqueryvalidation.org/
[2]: https://github.com/aspnet/jquery-validation-unobtrusive
[j1]: https://cdnjs.com/libraries/jquery/1.12.4
[j2]: https://cdnjs.com/libraries/jquery-validate/1.9.0
[j3]: https://cdnjs.com/libraries/jquery-validation-unobtrusive