Html input error validation message

AliYilmaz
 
on May 23, 2022 10:58 PM
680 Views

Hi,

There are 2 password entries. These inputs will match both passwords that will enter the same password. It will also obey password rules. And it will not be left blank. My purpose here is to show the errors that I will specify while the input shows errors. I will give error according to user language. What should I do in this situation? 

<form asp-controller="Account" asp-action="PasswordChanged" method="post">
    <div class="text-danger"></div>
    <div class="form-group">
        <label asp-for="CustomerCode" class="sr-only">@SharedLocalizer["Customer"].Value</label>
        <input asp-for="CustomerCode" id="CustomerCode" class="form-control" placeholder="@SharedLocalizer["Customer"]">
    </div>
    <div class="form-group mb-6">
        <label asp-for="Password" class="sr-only">@Localizer["Password"]</label>
        <div class="input-group mb-3">
            @*<input asp-for="Password" required id="password" class="form-control" placeholder="***********" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">*@
                        <input asp-for="Password" class="form-control pass" title="Password must contain at least 8 characters, including UPPER/lowercase and numbers" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" onchange="
                        this.setCustomValidity(this.validity.patternMismatch ? this.title : '');
                        if(this.checkValidity()) form.pwd2.pattern = RegExp.escape(this.value);">
            <span class="input-group-btn">
                <button class="btn btn-default reveal" type="button"><i class="fa-regular fa-eye"></i></button>
            </span>
        </div>
    </div>
    <div class="form-group mb-6">
        <label asp-for="Password" class="sr-only">@Localizer["Password"]</label>
        <div class="input-group mb-3">
            @*<input required id="password2" class="form-control pwd2" placeholder="***********" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" type="password">*@
                        <input required title="Please enter the same Password as above" class="form-control pass2" type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" name="pwd2" onchange=" this.setCustomValidity(this.validity.patternMismatch ? this.title : ''); ">
            <span class="input-group-btn">
                <button class="btn btn-default reveal2" type="button"><i class="fa-regular fa-eye"></i></button>
            </span>
        </div>
    </div>
    <div style="margin-top: 7px;" id="CheckPasswordMatch"></div>
    <input class="btn btn-primary" style="float: right" type="submit" value="@Localizer["PasswordChange"].Value">
</form>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 24, 2022 11:28 PM

Hi AliYilmaz,

You need to change the title attribute dynamically.

document.getElementById('INPUTID').setAttribute('title', 'NEW TITLE');