Client side unobtrusive validation

I need assistance on how to do this. I tried doing it without the assistance of a model but doesn’t work.

Added these script files to a _ValidationScriptsPartial file:

                   <environment include="Development">
                   <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
                   <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
                   </environment>

Here is jquery code, this is in a separate js file:

          $(document).ready(function () {

        $('#createdor').submit(function (e) {
               e.preventDefault();
                var title = $('#title').val();

            $(".error").remove();

    if (title.length < 1) {
        $('#title').after('<span class="error">This field is required</span>');
    }
});

My view:




        <div class="row">
            <div class="col-md-12">
                <h2>@ViewData["Title"]</h2>
                <hr />
            </div>
        </div>
        <div class="form-group col-md-8 col-lg-4">
            <label class="control-label">Title</label>
            <input id="title" type="text" asp-for="Title" name="title" class="form-control" />
        </div>
        <div class="form-group col-md-8 col-lg-4">
            <label class="control-label">As Of</label>
            <div class="input-group date" id="asof" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#asof"
                       asp-for="AsOf" />
                <span class="input-group-addon" data-target="#asof" data-toggle="datetimepicker">
                    <span class="fa fa-calendar"></span>
                </span>
            </div>
        </div>

        <div id="create_submit" class="form-group col-md-12">
            <input type="submit" value="Save" class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />
        </div>
    </form>
</div>

This is part of the view also. It is at the bottom after the closing div tag

                   @section Scripts
                 {
                             <partial name="_ValidationScriptsPartial" />
                         }

when I don’t have anything in the title the validation works and I get the ‘This field is required’ message when I type in a title and click save the button does nothing and doesn’t work. What am I doing wrong or missing?

Hi @mldardy, you’re always calling event.preventDefault() regardless of whether the validation fails or not; so you’ll either prevent the default only when there is no title, or submit() the form programmatically otherwise.

BTW why not use the native constraint validation by just adding a required attribute?

<input 
  id="title" 
  type="text" 
  asp-for="Title" 
  name="title" 
  class="form-control" 
  required
/>

You failed to mention that you are using ASP .NET Razor Web Pages (.cshtml) files with Javascript, it always helps that there is more information to start with.

  1. Where in your view do you have element with id createdor?
  2. You have not included all your HTML in the post for the view which makes it difficult to guess if your HTML is correct and all closing element tags are correctly written.
  3. submit action is meant to post the form to back-end with the action attribute provided. By calling event.preventDefault you are blocking the post behavior.
  4. any errors in browser developer console? (for Google Chrome it’s F12 on Windows). Try adding console.log statements in code to make sure they are really executing.
  5. the JS libraries you use are meant specifically for ASP .NET Web Pages and those have certain conditions to work: https://exceptionnotfound.net/asp-net-mvc-demystified-unobtrusive-validation/

I was able to figure this out by placing the script src in my _Layout.cshtml. Instead going thru the partial which there are multiple partials in my solution so they were all fighting with each other. Thanks everyone for your help.

1 Like