0

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        TestModel model = new TestModel();
         return View(model);
    }
}

Model

public class TestModel
{
    [Required(ErrorMessage="You have to put a first name!")]
    [StringLength(maximumLength: 24)]
    [Display(Name="First Name")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Yo the last name is required!")]
    [StringLength(maximumLength: 24)]
    public string LastName { get; set; }

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

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

View

<h2>Test</h2>

@using(Html.BeginForm())
{
    @Html.LabelFor(model => model.FirstName)
    @Html.TextBoxFor(model => model.FirstName)
    @Html.ValidationMessageFor(model => model.FirstName)
    <br />
    @Html.LabelFor(model => model.LastName)
    @Html.TextBoxFor(model => model.LastName)
    @Html.ValidationMessageFor(model => model.LastName)
    <br />
    @Html.LabelFor(model => model.PhoneNumber)
    @Html.TextBoxFor(model => model.PhoneNumber)
    @Html.ValidationMessageFor(model => model.PhoneNumber)
    <br />
    @Html.LabelFor(model => model.ZipCode)
    @Html.TextBoxFor(model => model.ZipCode)
    @Html.ValidationMessageFor(model => model.ZipCode)
    <br />
    <input type="submit"/>
}

    <!-- JS includes -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript">
        //  Masked plugin script here, linking to site doesn't work
    </script>
    <script type="text/javascript">    
        $(document).ready(function () {
        //  Validation works when masks are commented out
            $("#PhoneNumber").mask("(999) 999-9999");
            $("#ZipCode").mask("99999");
        });
    </script>

.Net Fiddle https://dotnetfiddle.net/qndNxE

Problem

If the two calls to the mask plugin are commented out validation works fine. This means that if I:

  1. Enter something into the first name and last name text boxes and then
  2. Tab out of each box and back in and hit delete to clear the contents

Validation messages appear telling me that the fields are required.

If I uncomment out the two calls to the mask plugin and repeat the two steps above, one of the textboxes (first or last) will not display its validation message.

Can anyone tell me why this happens and what to do to get around it?

Mike Cheel
  • 12,626
  • 10
  • 72
  • 101
  • I don't have an answer but I can point you to some troubleshooting. Inspect your DOM with and without the mask plugin. What are the differences? You don't need to look at the entire page, just focus on the differences for a single `input` element. The jQuery Validate plugin requires the `name` attribute for validation. So if the mask plugin interferes with this or creates a second hidden `input` element, then you probably would be better off without the `unobtrusive` plugin. After all, there's no point in "unobtrusive" if you have to do all this extra programming. – Sparky May 23 '14 at 19:28
  • Oh I tried all of that. They are identical. Also, if you view the simplified fiddle link I posted you can view the reproduction of my issue. – Mike Cheel May 23 '14 at 19:34
  • I guess I'm not understanding your issue. I tried your jsFiddle with and without the masked plugin… it seems to behave exactly the same both ways. Where exactly are you seeing this issue? Which browser versions? – Sparky May 23 '14 at 19:43
  • When I go to the fiddle I posted and ensure that the mask lines are not commented (they shouldn't be) I put text in the first and second boxes. Then I delete the text from both of the boxes. One shows a validation message and the other doesn't when they should both show it. Are you not getting the same result? Also, I am using chrome. – Mike Cheel May 23 '14 at 20:03
  • I tried commenting out again and now it is still doing it. Weird. So it looks like the question is why doesn't it work whether things are commented or not? – Mike Cheel May 23 '14 at 20:11
  • Also, everything seems to work properly in firefox and IE (suprisingly). Might just be a chrome issue but its hard to tell because I keep getting different behavior. But the different behavior is only in chrome so far. – Mike Cheel May 23 '14 at 20:28
  • Like I said before, you might have an easier time controlling the jQuery Validate plugin if you dump the Unobtrusive Validation plugin. – Sparky May 24 '14 at 00:39
  • That is out of my control at the moment unfortunately. That would require turning it off for the site or managing it manually. – Mike Cheel May 24 '14 at 20:23

1 Answers1

0

I wasn't able to find out the cause but what I ended up doing until we can get a better library situation to work around the problem is to handle the input event for the form inputs and mark them dirty and validate them if they are:

$("#myForm input").on("input", function () {
    $("#myForm").data("validator").element(this);
});
Mike Cheel
  • 12,626
  • 10
  • 72
  • 101