Client side Data Annotation validation on a button click using Jquery

Question

I have a model which has Required attributes in it. Is it possible to do data validation on a button click which is not of type submit. I did refer to this article and this one but it did not solve the issue.

Here's my model code.

 [Required]
 [Display(Name = "Number of beds")]
 public int Beds { get; set; }
 [Required]
 [Display(Name = "Number of Inpatient Beds")]
 public int InpatientBeds { get; set; }

My View

@using (Html.BeginForm(new {id = "form1", @class = "form-horizontal" }))
{

<div class="divPanel">
    <div class="row">
        <div class="col-md-3">                
                @Html.LabelFor(m => m.Beds)
                @Html.TextBoxFor(m => m.Beds, new { @class = "form-control", @type = "number"})
                @Html.ValidationMessageFor(m => m.Beds)

        </div>
        <div class="col-md-3">

                @Html.LabelFor(m => m.InpatientBeds)
                @Html.TextBoxFor(m => m.InpatientBeds, new { @class = "form-control", @type = "number"})
                @Html.ValidationMessageFor(m => m.InpatientBeds)
        </div>
<div class="col-md-3">             
            <button type=button  class="btn btn-primary" id="btnCalculateScore" > Calculate Score</button>
        </div>
 </div>
<div class="col-md-3">           
        <button type="submit" class="btn btn-primary" id="btnSaveChanges" data-toggle="modal"><i class="fa fa-share-square-o"></i> Update Status</button>
    </div>
</div>
}

And my script

$('#btnCalculateScore').on('click', function (evt) {

evt.preventDefault();

if ($('#form1').valid()) {
    //Do Something.
}
}

The validations do not work and the control enters the if loop even though the fields are empty? Is there something I am missing? Also does this approach also give out the validation messages which normally happen on a submit button event?

EDIT :

I added a normal Update Status button with type submit and the validations work there fine.
I added the id to my form to ensure it does not matter if the View contains another forms.

Does client-side validation work if you change button type to type="submit"? I just want to know jquery.validate.unobtrusive works in your code. — Win
– Win, Commented Mar 30, 2017 at 16:44
@Win I did change it to submit and used jquery.validate.unobtrusive. But still does not seem to validate properly — The_Outsider
– The_Outsider, Commented Mar 30, 2017 at 16:55
@CristianSzpisjak I did. Else I would have got an error on the button click itself. — The_Outsider
– The_Outsider, Commented Mar 30, 2017 at 16:59
You do not have a form with id="form1" - your overload of BeginForm() is adding route values, not html attributes. — user3559349
– user3559349, Commented Mar 31, 2017 at 22:57

TheFallenOne · Accepted Answer · 2017-03-31 17:26:29Z

0

I had the same issue and this seemed to resolve it for me.

@using (Html.BeginForm(new {id = "form1", @class = "form-horizontal" }))

On seeing the page source, this code does not attach the id Form1 to your form. Hence your validation will not happen as the form with id form1 is not found.

Instead,assuming your operation is a post and you are saving the data in say Action Method Save and controller Bed you can edit the form to

@using (Html.BeginForm("Save", "Bed", FormMethod.Post, new { id = "form1",@class = "form-horizontal"}))

This will attach the id parameter to your form(you can check using ViewPageSource) and it should work. There might be a better solution to this, but this worked properly for me without issues.

answered Mar 31, 2017 at 17:26

TheFallenOne

1,7162 gold badges27 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Client side Data Annotation validation on a button click using Jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related