CODEWITHSUNDEEP
jqueryrazorasp.net-mvc-5jquery-validateunobtrusive-validation
K.Z
K.Z

Reputation: 5075

ASP.NET-MVC 5 validate individual input field using jQuery- client-side validation

I am working on ASP.NET MVC5 app. my form is in partial view and using jQuery ajax post function to post data back to controller. Now I want to validate individual field as user inputing data inside. I have manage so far but I can validate using each field css id, however I want to check $this input fields as user changes its value??

$(function () {

    jQuery.validator.unobtrusive.parse();

    jQuery.validator.unobtrusive.parse("#CreateStudentProfileForm");


});



$(document).ready(function () {

    $("#CreateStudentProfileForm").on('input', function () {


        var v = $("#CreateStudentProfileForm").validate().element("#StudentNumber_UWLID");

        alert("va   " + v);
    });

});

razor form

@using (Html.BeginForm("CreateStudentProfile", "StudentProfile", FormMethod.Post, new { id = "CreateStudentProfileForm" }))

{
  @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Student</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.StudentNumber_UWLID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.StudentNumber_UWLID, new { htmlAttributes = new { id = "StudentNumber_UWLID", @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.StudentNumber_UWLID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.OtherTitle, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.OtherTitle, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.OtherTitle, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Gender, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.MiddleName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.MiddleName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Nationality, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Nationality, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Nationality, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control datepicker" } })
            @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

Upvotes: 0

Views: 4872

Answers (1)

Sparky
Sparky

Reputation: 98718

$("#CreateStudentProfileForm").on('input', function () {...

AFAIK, input is not a valid event. See: api.jquery.com/category/events/

Use change or keyup to see if an input value has changed or is being changed.

$("#myinput").on('change', function () {...

OR...

$("#myinput").on('keyup', function () {...

OR both...

$("#myinput").on('change keyup', function () {...

You also cannot attach the event to the form object. If you want to see if a particular input has changed, it must be attached to the input. Otherwise, you can use an each() to check them all...

$('input[type="text"]').each(function() {
    $(this).on('change', function() { ....

HOWEVER, the jQuery Validate plugin already checks every field automatically triggered by various events. It's unclear why you want to write handlers to check them again. Whatever you need to do, could likely be accomplished through one or more of the various .validate() options.

Just be aware that the unobtrusive validation plugin automatically constructs the call to .validate() based on your data attributes (that's why it's called "unobtrusive"). Therefore, your framework is automatically calling .validate(), and since only the first call to .validate() is used, all subsequent calls to .validate() are ignored. So in order to change any .validate() options, you'd have to used the plugin's .setDefaults() method.

Upvotes: 1

Related Questions