CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3jquery-validate
Shawn Mclean
Shawn Mclean

Reputation: 57469

ASP.NET MVC 3 validation on blur

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?

Upvotes: 3

Views: 6982

Answers (3)

KyleMit
KyleMit

Reputation: 29889

You can enable eager evaluation by using setDefaults() to override the onfocusout property with a function that always evaluates the blurred element by calling the valid() method.

// enable eager evaluation
$.validator.setDefaults({
    onfocusout: function (element) {
        $(element).valid();
    }
})

Demo With Eager Evaluation:
(Will show required after tab out)

// 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
(Won't show required until submit)

$("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>

Upvotes: 2

Robin Clowers
Robin Clowers

Reputation: 2160

There is a workaround for this behavior: Jquery Validation Plugin - can you enable "eager" validation from the options?

Upvotes: 2

Robert Levy
Robert Levy

Reputation: 29073

remote validation is a new feature of MVC 3: http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx

Upvotes: -1

Related Questions