// Enable this line to validate the form on page load // $("form").valid(); // Display the result of the form. Only called when validation succeeds! $("input[type='submit']").click( function(event) { event.preventDefault(); // Do not actually submit alert("You entered " + $("#your-name-id").val() + ", age " + $("#your-age-id").val()); } );
<!-- Example of a simple jQuery Unobtrusive Validation form See http://www.mobzystems.com/blog/setting-up-jquery-unobtrusive-validation/ --> <form> <div data-valmsg-summary="true"> <ul></ul> </div> <div> <label for="your-name-id">Your name:</label> <input type="text" name="yourname" id="your-name-id" placeholder="Please enter your name" data-val="true" data-val-required="Please enter a name" data-val-length="Please enter more than two letters" data-val-length-min="2" /> <span data-valmsg-for="yourname" data-valmsg-replace="true" /> </div> <div> <label for="your-age-id">Your age [hint: 10-120]:</label> <input type="text" name="yourage" id="your-age-id" placeholder="Please enter your age" data-val="true" data-val-required="Please enter an age" data-val-number="Please enter a valid number" data-val-range="You must be between 10 and 120 years old" data-val-range-min="10" data-val-range-max="120" /> <span data-valmsg-for="yourage" data-valmsg-replace="true" /> </div> <p> <input type="submit" value="Go" /> </p> </form> <div> <a href="http://www.mobzystems.com/blog/setting-up-jquery-unobtrusive-validation/">View blog entry</a> </div> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>
/* Show validation results in red */ .field-validation-error { color: red; } /* Change background color of invalid text inputs to light red */ input[type="text"].input-validation-error { background-color: #fcc; }