How to underline input-invalid also when is empty? [Validation]

Hi, How is it possible to show the div

    <div class="error-message-input">Compile this field.</div>

also when the user leaves the field empty? I put the tag

 required 

to the input field but it shows the message only when the user focused on and leaves the field empty. I’d like to show the message also when the user didn’t focused on the field and Leaves the input empty, for example the user click on submit button, but the field empty are underline on red with the message.

Add the following classes to parent item-input element:

item-input-with-error-message item-input-invalid

Hi Vladimir, thank you for reply. I added

           <li class="item-content item-input item-input-with-error-message item-input-invalid">
                <div class="item-inner">
                    <div class="item-title item-label">Example</div>
                    <div class="item-input-wrap">
                        <input type="text" placeholder="" name="example" id="example" required validate>
                        <span class="input-clear-button"></span>
                    </div>
                </div>
            </li>

in this way the fields are immediately highlighted in red. Is not possible to underline them if the user leave the field empty because he didn’t focused on the field?

Hi @nolimits4web your suggestions works with android smartphone, mac ios, but it doesn’t work on iphone. On iphone the red underline is not showed. I don’t have an idea the reason

You need to add validation on button when it’s clicked to check whether the field is empty or not and if it is empty then add the above classes.

<li class="item-content item-input " id="val1">
            <div class="item-inner">
                <div class="item-title item-label">Example</div>
                <div class="item-input-wrap">
                    <input type="text" placeholder="" name="example" id="example" required validate>
                    <span class="input-clear-button"></span>
                </div>
            </div>
        </li>

$("#btnSubmit").click(function(){
if(!$("#example").val()){
$("#val1").addClass(“item-input-with-error-message item-input-invalid”);
} else{
$("#val1").removeClass(“item-input-with-error-message item-input-invalid”);

  }
1 Like

Hi Vladimir, this solution works with simple fields.
What we have to add with autocomplete? because with this element it doesn’t work. Thank you :slight_smile: