PageRemote will call handlers each code input ?

Question

[Remote(
    "checkemail",
    "validation",
    ErrorMessage ="Email Address already exists", 
    AdditionalFields = "__RequestVerificationToken", 
    HttpMethod ="post"
)]
[BindProperty]
public string Email { get; set; }

If I enter 'admin' it will post to handler for 'a','ad','adm','admi','admin'

how to fix it? post to handler when I click submit button?

Answer 1

Hi @打玻璃

If I input 'admin' it will post 5 times to validate if it is duplicate. for each 'a','ad','adm','admi','admin'

According to this tutorial, I create a sample and test the code.

The RemoteValidation method will be triggered after you entered the value and the textbox lost the focus. It doesn't trigger every time you enter a character. Check the following screenshot:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Answer 2

Hi @打玻璃

But If it trigger one time then you go on enter something it will trigger everytime you enter one character

For this problem, this is by design, so that it is more clearly to let the user knows whether the input value is valid or not.

You can imagine that: if it is designed to use the change event (like this first time), the user needs to do another action/step to make the textbox lose focus, after that validation will work. But if use this method (trigger every time you enter one character), we could easier to know whether the new value is valid or not.

If you still want to use the change event to validate the new data, refer to the following sample: use JQuery Aajx to call the handler method and valid the data by yourself, then based on the validate result to show the error message:

.csthml: check the Email2

@page
@model RazorAspNet6Sample.Pages.RemoteValidationModel
<form method="post">
    <div class="form-group">
        <label asp-for="Email" class="control-label"></label>
        <input asp-for="Email" />
        <span asp-validation-for="Email"></span><br>
    </div>
    <div class="form-group">
        <label asp-for="Email2" class="control-label"></label>
        <input asp-for="Email2" />
        <span id="validateresult" style="color:red"></span><br>
    </div>
    <input type="submit" />
</form>

@section scripts{ 
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <partial name="_ValidationScriptsPartial" />
    <script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.min.js"></script>
    <script>
        $(function(){  
            $("input[name='Email2']").on("change",function(){
                event.preventDefault();
                var mail = $(this).val();
                $.ajax({
                    type: 'POST',
                    url: "/RemoteValidation/?handler=CheckEmail2",
                    data: {"email":mail}, 
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    success: function (response) {
                        $("#validateresult").html("");
                        if(response.status == false){
                            $("#validateresult").html(response.message)
                        }
                    },
                    failure: function (error) {
                        alert(error);
                    }
                });
            });
        })
    </script>
}

.cshtml.cs

    public class RemoteValidationModel : PageModel
    {
        [PageRemote(
            ErrorMessage = "!!! Duplicate Email Address !!!",
            AdditionalFields = "__RequestVerificationToken",
            HttpMethod = "post",
            PageHandler = "CheckEmail"
        )]
        [BindProperty]
        public string Email { get; set; }
        [BindProperty]
        public string Email2 { get; set; }
        public void OnGet()
        {

        }
        public JsonResult OnPostCheckEmail()
        {
            var existingEmails = new[] { "******@test.com", "******@test.com", "******@test.com" };
            var valid = !existingEmails.Contains(Email);
            return new JsonResult(valid);
        }
        public JsonResult OnPostCheckEmail2(string email)
        {
            var existingEmails = new[] { "******@test.com", "******@test.com", "******@test.com" };
            var valid = !existingEmails.Contains(email);

            if (valid)
            {
                return new JsonResult(new { status = true, message = "Avaiable Email Address" });
            }
            return new JsonResult(new { status = false, message = "!!! Duplicate Email Address !!!" });
           
        }
    }

The result as below: as we can see, it will trigger the validation method after the value changed.

Best regards,
Dillion