Hello All,

I'm having an issue with jQuery validate that I haven't seen before and I'm at a loss as to what is going on.

I installed Umbraco Forms and was not able to achieve what I wanted to do with field validation so I decided to fall back to using jQuery Validate. After banging my head on the wall for a while, I've stripped it down to a bare bones test and have no idea why its not working.

My Partial View:

<div class="light-wrapper">
    <div class="container inner">
        <div class="row">
            <div class="col-sm-6">
                @CurrentPage.copy
            </div>
            <div class="col-sm-6">
                <form id="frmTesting" method="post" action="">
                    <legend>Registration</legend>
                    <input type="text" name="test" id="test">
                    <input type="submit" class="btn btn-submit bm0 pull-left" value="Register">
                </form>
            </div>
        </div>
    </div>
</div>

The stand alone JS file where I'm trying to do the validation (ValidateRegForm.js):

$(document).ready(function () {

    $("#frmTesting").validate({
        validClass: "DoesThisFire",
        rules: {
            test: {
                required: true,
                email: true
            }
        },
        messages: {
            test: {
                required: "This field is required",
                email: "Invalid E-Mail Address"
            }
        }
    });
});

jQuery load order:

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/5.1/jquery.validate.unobtrusive.min.js"></script>
    <script src="/scripts/ValidateRegForm.js"></script> 

Based on some posts, I've added this to the web.config:

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

I've verified in the inspector that all of the JS files are loading as expected and there are no errors in the console.

This is the HTML in the inspector when the page loads:

<form id="frmTesting" method="post" action="" novalidate="novalidate">
  <legend>Registration</legend>
  <input type="text" name="test" id="test">
  <input type="submit" class="btn btn-submit bm0 pull-left" value="Register">
</form>

After I enter anything in the textbox, the "valid" class appears on the element. Note that I have attempted to override this default value using validClass in my JS which seems to indicate that its not firing.

<form id="frmTesting" method="post" action="" novalidate="novalidate">
  <legend>Registration</legend>
  <input type="text" name="test" id="test" aria-invalid="false" class="valid">
  <input type="submit" class="btn btn-submit bm0 pull-left" value="Register">
</form>

Does anyone have any clue as to what might be overriding / taking over the validation? Is it possible it's related to the installation of Umbraco Forms?

Thank you in advance!