Question 210840 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery Validation of Form

I am having a lot of trouble trying to modify the errorClass and validClass with Jquery validation.

I assume all I need to do is add the .validate function and set the parameters.

Whilst the validation does fire and the validation message is shown, the classes are still changed to the standard "input-validation-error" or "valid".

There are no JQuery errors thrown in the browser.

I believe the problem may be something to do with the unobtrusive plugin preventing the jquery.validate settings being applied.

JQuery v3.7.0, Jquery-validate v1.19.5, Jquery-validate-unobtrusive
v4.0.0

Script:

@section Scripts {
  $(document).ready(function (e) {
            $("#myForm").validate({
                errorClass: "is-invalid",
                validClass: "is-valid"
            });
  });
}

Razor Page:

<form id="myForm" method="post">
    <div class="row">
        <div class="col-sm-3">
            <label asp-for="ADR.AircraftID" class="form-label"></label>
            <select asp-for="ADR.AircraftID" asp-items="@(new SelectList(Model.Aircraft,"AircraftID","Registration"))" class="form-select" required>
                <option></option>
            </select>
            <span asp-validation-for="ADR.AircraftID" class="text-danger"></span>
        </div>
        <div class="col-sm-3">
            <label asp-for="ADR.PersonID" class="form-label"></label>
            <select asp-for="ADR.PersonID" asp-items="@(new SelectList(Model.Person,"PersonID","FullName"))" class="form-select" required>
                <option></option>
            </select>
            <span asp-validation-for="ADR.PersonID" class="text-danger"></span>
        </div>
        <div class="col-sm-3">
            <label asp-for="ADR.Date" class="form-label"></label>
            <kendo-datepicker for="ADR.Date" class="form-control" required></kendo-datepicker>
            <span asp-validation-for="ADR.Date" class="text-danger"></span>
        </div>
        <div class="col-sm-3">
            <label asp-for="ADR.TTIS" class="form-label"></label>
            <input asp-for="ADR.TTIS" class="form-control" required />
            <span asp-validation-for="ADR.TTIS" class="text-danger"></span>
        </div>
        <div class="col-sm-12">
            <label asp-for="ADR.Details" class="form-label"></label>
            <textarea asp-for="ADR.Details" class="form-control" rows="3" required></textarea>
            <span asp-validation-for="ADR.Details" class="text-danger"></span>
        </div>
    </div>
    <br />
    <div class="form-check">
        <input asp-for="ADR.Deferred" class="form-check-input isdeferred" type="checkbox" />
        <label asp-for="ADR.Deferred" class="form-check-label"></label>
        <span asp-validation-for="ADR.Deferred" class="text-danger"></span>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <label asp-for="ADR.MELRef" class="form-label"></label>
            <input asp-for="ADR.MELRef" class="form-control deferred" />
            <span asp-validation-for="ADR.MELRef" class="text-danger"></span>
        </div>
        <div class="col-sm-2">
            <label asp-for="ADR.DeferralExpiry" class="form-label"></label>
            <kendo-datepicker for="ADR.DeferralExpiry" class="form-control deferred"></kendo-datepicker>
            <span asp-validation-for="ADR.DeferralExpiry" class="text-danger"></span>
        </div>
    </div>

    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <a class="btn btn-outline-secondary" asp-page="./Index"> Close</a>
        <input type="submit" id="Submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

Header:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - FlightLog</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> 
  
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>    
   
    <link href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" /> 

    <script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.aspnetmvc.min.js"></script>

    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/cultures/kendo.culture.en-NZ.min.js"></script>       
</head>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Using the highlight and unhighlight functions within .setDefaults causes the validation to fire before the submit button is used.

    The solution for myself was instead to set the custom classes in both the validator and unobtrusive settings.

    const validationCustomSettings = {
    validClass: "is-valid",
    errorClass: "is-invalid",
};
       
jQuery.validator.setDefaults(validationCustomSettings);           
jQuery.validator.unobtrusive.options = validationCustomSettings;

  2. 0

    You may try as below:

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
 <script>
$.validator.setDefaults({
    validClass: "is-valid",
    // set error class doesn't work here ,so i have to try with hard code for error class
    //errorClass: "is-invalid",
          
    highlight: function (element, errorClass, validClass) {
        $(element).addClass("is-invalid").removeClass(validClass);
        
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).addClass(validClass).removeClass("is-invalid");
    },
});

    Result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search