Click here to Skip to main content
15,851,242 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
You guys already know what am about to say, I have a Razor page called Index.cshtml and a Model behind that called Index.cshtml.cs, I have defined all the rules for the user input inside the Model and I have defined a method called OnPost that is supposed to check if the input the user entered in the form conforms to those rules. Except that the email field which has a regular expression that should check for invalid email is accepted when I omit the @ character in the input. Also I feel like my form is being sent to the controller before the validation rules are given an Okay. How do I revise my code to make the Model correctly validate the email address and also prevent submission to controller until all fields have been validated, Thank You because you aready experienced in that.

What I have tried:

Model code
C#
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;

namespace ASPLearner.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }
        //declare the fields to validate for the Name and Query
        //add the required attributes
        
        [Required(ErrorMessage = "The name field is required")]
        //the name field needs to be at least three characters long
        [StringLength(3,ErrorMessage ="Please enter a valid name")]
        public string Name
        {
            get;set;
        }
        //the query field cannot be empty
        [Required(ErrorMessage ="The query field cannot be empty")]
        
        //the query field needs to be at least 20 characters long
        [StringLength(20,ErrorMessage ="The query needs to be at least 20 characters long")]
        public string Query
        {
            get;set;
        }
        [Required(ErrorMessage ="The email field is required")]
        [StringLength(15,ErrorMessage ="Email Address to short")]
        //all emails need to conform to the email pattern
        [RegularExpression("^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$\r\n",ErrorMessage ="You entered an invalid Email Address")]
        public string Email { get; set; }
     
        
        public IActionResult OnPost()
        {
            //handle any invalid input in here
            if(!ModelState.IsValid) {
               return Page();   
            }
            return RedirectToPage("/Queries");
        }
        
    }
}

Form section code
HTML
<form method="post"  asp-route="Form" id="form">
  <div class="form-group">
   <label for="name">Name</label>
   <input type="text" name="Name" class="form-control" id="name" onchange="validate()">
   <span asp-validation-for="Name" class="text-danger" id="vname"></span>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" name="Email"/>
    <span asp-validation-for="Email" class="text-danger" id="vemail"></span>
   </div>
  <div class="form-group">
    <label for="query">Query</label>
    <textarea class="form-control" name="Query" id="query" style="margin-top:10px"></textarea>
    <span asp-validation-for="Query" class="text-danger" id="vquery"></span>
   </div>
 </form>
Posted
Updated 26-Jun-23 4:09am
v2
Comments
Richard Deeming 5-Jul-23 4:08am    
Why does your regular expression have an \r\n after the $ end-of-line/string anchor?

And where have you included the validation scripts in your view?
Tim the Gamer 5-Jul-23 8:06am    
I posted to Stackoverflow and the issue was resolved. I added the _ValidationScriptsPartial and the model successfully validated the form
Tim the Gamer 5-Jul-23 8:14am    
I also learnt that the validation Scripts which include validate.js, unobtrusive.js and jquery allow for the OnPost to be called when the user input confirms to the validation rules in the model

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900