<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a type="button" class="btn" href="#article-editor" data-toggle="modal">Modal Form with Validation</a> <div class="modal fade" id="article-editor" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>DOC Entry</legend> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="feetype">Fee Type</label> <div class="col-md-5"> <select id="feetype" name="feetype" readonly class="form-control"> <option value="1">Supervision</option> </select> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="amount">Amount</label> <div class="col-md-5"> <div class="input-group"> <span class="input-group-addon">$</span> <input id="amount" name="amount" class="form-control" placeholder="0.00" type="text"> </div> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="tender">Tender</label> <div class="col-md-4"> <div class="checkbox"> <label for="tender-0"> <input type="checkbox" name="tender" id="tender-0" value="1"> Cash </label> </div> <div class="checkbox"> <label for="tender-1"> <input type="checkbox" name="tender" id="tender-1" value="2"> Money Order </label> </div> <div class="checkbox"> <label for="tender-2"> <input type="checkbox" name="tender" id="tender-2" value="3"> Credit Card </label> </div> <div class="checkbox"> <label for="tender-3"> <input type="checkbox" name="tender" id="tender-3" value="4"> Check </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="note">Note</label> <div class="col-md-4"> <textarea class="form-control" id="note" name="note"></textarea> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="btnSubmit"></label> <div class="col-md-8"> <button id="btnSubmit" name="btnSubmit" class="btn btn-primary">Submit</button> <button id="btnCancel" name="btnCancel" class="btn btn-default">Cancel</button> </div> </div> </fieldset> </form> </div> </div> </div>

<script src="~/Scripts/jquery.validate.min.js"></script> <script> $(document).ready(function () { var docEntryUrl = "/Home/TestObjectViaPost/" $("#article-editor form").validate({ rules: { feetype: { required: true }, amount: { required: true, number }, note: { required: false, maxlength: 250 } }, messages: { feetype: "Is readonly", amount: { required: "An amount is required", number: "Must be a number, this is money" }, Note: {maxlength: "250 characters maximum"} }, highlight: function(element) { $(element).closest(".form-group").removeClass("has-success").addClass("has-error"); }, success: function(element) { $(element).addClass("valid").closest(".form-group").removeClass("has-error").addClass("has-success"); }, submitHandler: function(form) { $.ajax({ cache: false, type: $(form).attr("method"), url: docEntryUrl, data: $(form).serialize(), success: function(data, status) { $(this).modal("hide"); $(form).trigger("reset"); } }); } }); return false; }); </script>