FluentValidation message appears, but form submits anyway

Question

Using MVC4 with FluentValidation. I have a field with two rules on it. The NotEmpty rule works as expected. The Matches rule seems to fire, but the form submits anyway, even though the validation message pops up as if it's failing validation.

I have the following view model and validator:

public class ImpactedEntityViewModelValidator : AbstractValidator<ImpactedEntityViewModel>
{
    public ImpactedEntityViewModelValidator()
    {
        RuleFor(x => x.ImpactedEntityDescription)
            .Matches("[a-zA-Z0-9/ ]{1,}").WithMessage("Description can only contain letters, numbers, '/', and spaces.")
            .NotEmpty().WithMessage("Description is required.");
    }
}

[Validator(typeof(ImpactedEntityViewModelValidator))]
public class ImpactedEntityViewModel
{
    public int? ImpactedEntityLUID { get; set; }

    [Display(Name = "Impacted Entity Description")]
    public string ImpactedEntityDescription { get; set; }

    public bool? Deleted { get; set; }
}

View:

@model ChangeControlForm.Models.ImpactedEntityViewModel

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.EditorFor(model => model)

    <p>
        <input type="submit" value="Create" class="btn btn-default" />
    </p>
}

Added to Global Application_Start:

FluentValidation.Mvc.FluentValidationModelValidatorProvider.Configure();

I'm not sure how that's possible. It won't submit if the field is left empty, as expected. If I enter a "%" for example, the message for the Matches rule will pop up but then it will immediately submit after and write the record. Is there something I'm missing that could cause that?

Thank you.

Per Michael Crook's answer:

This solved the issue:

$("form").submit(function () {
    var form = $(this);
    if (form.valid()) {
        // do valid stuff
    }
    else {
        return false;
    }
});

Per LeftyX's answer:

Checked my Nuget packages and jQuery had an update available. Updating it to 2.1.4 fixed the issue and I don't need the extra check on submit.

Thanks everyone.

Answer 1

Aside from the possible causes mentioned already above, this line in your view can also cause a submit of the form as soon as a user hits your submit button, even though the form is still invalid:

HtmlHelper.ClientValidationEnabled = false;

Answer 2

You don't really have to do the check for validation yourself:

$("form").submit(function () {
    var form = $(this);
    if (form.valid()) {
        // do valid stuff
    }
    else {
        return false;
    }
});

I mean, you can, but probably you probably already have everything you need in place.

If you check in your Scripts folder you should have:

jquery.validate.js
jquery.validate.unobtrusive.js

and

jquery.unobtrusive-ajax.js (this is only needed if you're POSTing ajax)

and you BundleConfig already bundles the scripts needed for the client-side validation:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    "~/Scripts/jquery.unobtrusive*",
    "~/Scripts/jquery.validate*"));

the default template doesn't add the reference to the bundle automatically but you can add it simply adding:

@Scripts.Render("~/bundles/jqueryval")  

to your _Layout.cshtml or wherever you need the client-side validation.

if you check the html for your form you will see that your input:

<input name="ImpactedEntityDescription" class="text-box single-line" id="ImpactedEntityDescription" type="text" value="" data-val="true" data-val-required="Description is required." data-val-regex-pattern="[a-zA-Z0-9/ ]{1,}" data-val-regex="Description can only contain letters, numbers, '/', and spaces.">

have all the unobtrusive attributes set in place:

data-val="true" 
data-val-required="Description is required." 
data-val-regex-pattern="[a-zA-Z0-9/ ]{1,}" 
data-val-regex="Description can only contain letters, numbers, '/', and spaces."

jquery.validate.js checks the form before sumitting for you (line 404):

// http://jqueryvalidation.org/Validator.form/
form: function() {
    this.checkForm();
    $.extend( this.submitted, this.errorMap );
    this.invalid = $.extend({}, this.errorMap );
    if ( !this.valid() ) {
        $( this.currentForm ).triggerHandler( "invalid-form", [ this ]);
    }
    this.showErrors();
    return this.valid();
},

Check your nuget packages are updated.

Answer 3

You will probably find that FluentValidation (I've only ever used for server side validation, not client side) doesn't have the ability to disable posting. You could try using jquery to search form for validation error classes and then disable the button yourself.