CODEWITHSUNDEEP
jqueryasp.net-mvcunobtrusive-validation
user2308142
user2308142

Reputation: 31

Performing Client Side validation

I would like to know what is the best approach to handle client-side, javascript or jQuery driven validation of MVC4 fields against attributes placed on a ViewModel's fields.

here is example

    [Required]
     public string Username { get; set; }

     [Required]
     public string Email { get; set; }

    <div>
        @Html.LabelFor(m=>m.Username)
        @Html.ValidationMessageFor(m => m.Username)
    </div>

    <div>
        @Html.LabelFor(m=>m.Email)
        @Html.ValidationMessageFor(m => m.Email)
    </div>

currently, If I enter an invalid email address, an empty UserName, etc. in the form and hit Submit I'm correctly notified of the errors. it is working as expected

I would like that every time when user lost the focus from text box and on key press, validation for that field must occurs.

I fixed this problem by adding this to every page..

<script>
    $("input").blur(function () {
        $(this).valid();
    });
    $("input").keydown(function () {
        $(this).valid();
    });
</script>

Writing hard-coded jQuery fragments is not the best option. I would like a data-driven approach, possibly embedded in MVC4 or if there is a way to configure jquery.validate.unobtrusive to perform this validation.

waiting for reply,

Thanks- Atul

Upvotes: 1

Views: 1027

Answers (1)

Oleksii Aza
Oleksii Aza

Reputation: 5398

Try to place jquery.validate and jquery.validate.unobtrusive scripts on your page 

<script src="@Url.Content("~/Scripts/jquery-1.6.1.min.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" 
type="text/javascript"></script>

and call 

@{Html.EnableClientValidation();}
@{Html.EnableUnobtrusiveJavaScript();}

or set in web.config next settings:

<appSettings>
  <add key="ClientValidationEnabled" value="true"/>
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

Look here for more information: Unobtrusive Client Validation in ASP.NET MVC 3

EDIT:

jQuery validation takes its role after first form submition, take a look at source code of onfocusout and onkeyup:

onfocusout: function( element, event ) {
            if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
                this.element(element);
            }
        },
onkeyup: function( element, event ) {
            if ( event.which === 9 && this.elementValue(element) === "" ) {
                return;
            } else if ( element.name in this.submitted || element === this.lastElement ) {
                this.element(element);
            }
        },

If you need to force validation on blur and keydown, you would try to override default definitions of these functions. Try to do it with validator object (it is all the metadata for the validation giving us the ability to access the validate options at anytime in the page cycle). The following code demonstrates it:

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
    $(function () {
        //this function will be called after validation has triggered
        function isValid(element) {
            this.element(element);
        }
        //get current form validator (here could be other selector that corresponds to your form)
        var validator = $('form').data('validator');
        validator.settings.onfocusout = isValid;
        validator.settings.onkeyup = isValid;
    });
</script>

Upvotes: 1

Related Questions