MVC form submits after failing validation

Question

This has been asked and answered 100 times, and I have read them all, yet still my form submits after failing validation. I found a reference to not using jquery.validate higher than 1.9.0, so I rolled back to that (had been using 1.11) but no change.

If i submit with an invalid form (nothing filled out) the error messages appear, then the form submits.

I have successfully implemented validation a couple times in the past, and I can't see what is different about this time. I need to take a break from banging my head against this, hoping a fresh pair of eyes may see something.

--Scripts:

    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.1.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Model:

    [Display(Name = "First Name *")]
    [StringLength(20)]
    [Required(ErrorMessage = "Required.")]
    public string FirstName { get; set; }

    [Remote("CheckDuplicatePerson", "Validation", AdditionalFields = "FirstName", ErrorMessage="Person Exists")]
    [Display(Name = "Last Name *")]
    [StringLength(30)]
    [Required(ErrorMessage = "Required.")]
    public string LastName { get; set; }

View:

    <div class="PersonForm">

            @using (Html.BeginForm("AddPerson", "Person", FormMethod.Post))
            { @Html.ValidationSummary(true)
         <div id="editor-left">
                 <div class="formGroup">
                    <div class="editor-label">
                           @Html.LabelFor(model => model.FirstName)  
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.FirstName)  <br />
                        @Html.ValidationMessageFor(model => model.FirstName)
                    </div>
                </div>
                <div class="formGroup">
                    <div class="editor-label">
                        @Html.LabelFor(model => model.MiddleName)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.MiddleName)
                    </div>
                </div>
                <div class="formGroup">
                    <div class="editor-label">
                        @Html.LabelFor(model => model.LastName) 
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.LastName)  <br />
                        @Html.ValidationMessageFor(model => model.LastName)
                    </div>
                </div>



                 <div class="controls"><hr />
                    <input type="submit" class="skbutton" value="Next Page" />
                </div>
            }                
  </div>

UPDATE:

Get a JS Error in the jquery 1.9.1 file on this peice of code:

    parseJSON: function( data ) {
    // Attempt to parse using the native JSON parser first
    if ( window.JSON && window.JSON.parse ) {
        return window.JSON.parse( data );
    }

Did you check to see if you're getting any JavaScript errors? — Jerad Rose, Mar 05 '14 at 23:04
Good idea. Ok, I have an 'Unexpected token' error in the jquery 1.9.1 file. I have editted the OP to show the code that is erroring. — BattlFrog, Mar 05 '14 at 23:26
Is it the CheckDuplicatePerson remote validation that's failing? If you remove that validation, does it work? — Jerad Rose, Mar 05 '14 at 23:54
Check if this helps http://stackoverflow.com/questions/14822540/syntax-error-with-parsejson-during-unobtrusive-validation — Nitin Varpe, Mar 06 '14 at 07:08

score 1 · Accepted Answer · answered Mar 06 '14 at 16:09

Finally got it working.

@Jerad, I tried removing the remote validation, no help.

Turned out it was the microsoft unobtrusive script. I updated that and it started working. There seems to be a fine line of dependancies with all this stuff. Here are my versions that are working:

jquery-1.9.1

jquery.unobtrusive-ajax - 3.1.1

jquery.validate - 1.11.1

jquery.validate.unobtrusive - 3.1.1

Thank you all for your input.

score 0 · Answer 2 · answered Sep 01 '14 at 08:29

0

I had a similar problem. Putting @Html.ValidationMessageFor(model => model.FieldName) for every input field somehow fixed the problem

answered Sep 01 '14 at 08:29

user3783056

1
2

MVC form submits after failing validation

2 Answers2