0

It is very simple web page. I just want to change the background colour of validation Error input. i followed same code from ASPNET Core book and JQuery own website. But doesn't work

@section scripts {
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("input.input-validation-error").addClass("bg-warning");
    });
</script>

}

form input is 

  <div class="input-group mb-1" id="DivPrnReason">
    <label for="Location" class="col-sm-12 form-control-plaintext">What PRN was given?</label>
    <div class="col-sm-6 col-md-10 col-lg-10 ">
       <input asp-for="PRNReason" class="form-control" type="text" placeholder="What">
    </div>
  </div>

After Submitting the page there is no error but class updated with "input-validation-error" but bg-warninig didn't added to the class.enter image description here

AliAzra
  • 889
  • 1
  • 9
  • 28
  • 1
    Have you checked the script block is executed at all? – Andrei Sep 20 '19 at 15:33
  • 4
    *"After Submitting the page"* - When does the `input-validation-error` class get added to the element? Because you're looking for it as soon as the page loads. If it's added any time after that, your code has already run. – David Sep 20 '19 at 15:33
  • 2
    Rather than adding another class in that situation, you probably want to change your CSS for `input.input-validation-error` to include the styling you're using for `bg-warning`. – T.J. Crowder Sep 20 '19 at 15:34
  • Little confusion do you want the class applied when validating or when submission? Are you using the jquery validator plugins supplied in the asp.net core mvc template project? – Callistus Asirvatham Sep 20 '19 at 15:37
  • David is right. I just followed the code in the book and Script is located in the header. As soon as I moved it to the end, start working. Thank you. – AliAzra Sep 20 '19 at 15:38
  • Hi, Callistus Asirvatham. I wanted to class applied after submission, Form Model state is false and wanted to apply warning background colour to the validation error input. – AliAzra Sep 20 '19 at 15:41
  • *"class updated with "input-validation-error" but bg-warninig didn't added to the class"* so you mean there was not input-validation-error before? if yes then 80% sure you are adding bg-warning befor input-validation-error – Evik Ghazarian Sep 20 '19 at 15:48

1 Answers1

-2

The script was on the beginning of the code. Need to be at the end.

AliAzra
  • 889
  • 1
  • 9
  • 28
  • The script trys to affect a part of dom that isnt rendered yet. Thats why you put the scripts at the end of your page. – Grumpy Sep 20 '19 at 15:48
  • 1
    jQuery code that accesses the DOM at load time should be inside `$(document).ready()`. – Barmar Sep 20 '19 at 15:49
  • 1
    The OP has their logic in a document ready already. If there is still a timing issue, then that suggests that there is logic that dynamically changes the classes that the logic in the document ready is searching for. – Taplar Sep 20 '19 at 15:49