Html input error validation message

AliYilmaz
 
on May 23, 2022 10:58 PM
397 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 02:45 AM

Hi AliYilmaz,

You need to use JavaScript to validate password.

Validate Password field

Password Strength validation example using JavaScript and jQuery

Validate Password and confirm password

Bootstrap HTML5 Registration (Signup) Form with validation Example and Source Code

AliYilmaz
 
on May 24, 2022 04:41 AM

Hi,

Can I change the message of the field here. I will also give other password messages. I shared my codes, can you make an example accordingly?

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');