0

In my add and edit forms, I need to show Text Box borders in red color if its validation fails on submit button click. For that I have added code in my .css file as below:

input:not([type]):invalid,
input:not(.browser-default):invalid,
input[type=text]:not(.browser-default):invalid,
input[type=number]:not(.browser-default):invalid,
input[type=search]:not(.browser-default):invalid,
textarea.materialize-textarea:invalid,
textarea:invalid,
.select-wrapper > input.select-dropdown:invalid {
    box-shadow: 0 1px 0 0 red;
}

But now the issue is every time when we open the form, text box borders are highlighted in red color.

$(".SubmitKpi").click(function () {    
var SourceIdString = '';    
$('#KPName span#KR_KP_NAME-error').text("")
if (!$('#Addform').valid()) {
        if (((!$('.box1').valid()) || (!$('.box2').valid()) || (!$('.box3').valid()) || (!$('.box5').valid()))) {
            $('#box1-error').hide()
            $('#box2-error').hide()
            $('#box3-error').hide()
            $('#box5-error').hide()
            if (!$('.box1').valid())
                $('#box1-error').show()
            else if (!$('.box2').valid())
                $('#box2-error').show()
            else if (!$('.box3').valid())
                $('#box3-error').show()
            else
                $('#box5-error').show()
        }
    }
    else if ($('#Addform').valid()) {
        if ($("#PI_DATA_SOURCE_NAME .tag-sel-item").length != 0) {
            //...
        }
        else {
            $(".SourceDiv .error").text("This field is required.");
        }
    }    
    return false
})

Is there anything to do changes on submit button click to show red based on the validation. And also in the page load function (document.ready() function)?

user18048414
  • 161
  • 2
  • 15
  • give your js code – Rahul Mohanty Sep 30 '22 at 06:54
  • Do these previous answers help: [Delay HTML5 :invalid pseudo-class until the first event](https://stackoverflow.com/questions/7920742/delay-html5-invalid-pseudo-class-until-the-first-event?noredirect=1&lq=1) and [Validation in HTML5. :invalid classe after submit](https://stackoverflow.com/questions/7576190/validation-in-html5-invalid-classe-after-submit?noredirect=1&lq=1) and [How to make pseudo class :invalid apply to an input AFTER submitting a form](https://stackoverflow.com/questions/41619497/how-to-make-pseudo-class-invalid-apply-to-an-input-after-submitting-a-form?noredirect=1&lq=1) – Yogi Sep 30 '22 at 07:23
  • You can add a new class name to the wrong input after the validation fails, add a Css style to this class, and remove it after the validation succeeds. – Chen Sep 30 '22 at 07:37
  • You can add the `:focus` attribute to your pseudo-class, but this doesn't seem to be the best effect. – Chen Sep 30 '22 at 09:21

0 Answers0