validate html input in asp.net with MVC

Question

I am a beginner in MVC. I am trying to create a registration form.

This is my view

 <div class="registrationForm">
          @using (Html.BeginForm("Registration", "Login", FormMethod.Post, new { enctype = "multipart/form-data" }))
          {
              <p>
                  <input type="text" id="firstname" name="firstName" placeholder="First Name" class="radius mini" />
                  <input type="text" id="lastname" name="lastName" placeholder="Last Name" class="radius mini" />
              </p>
              <p>
                  <input type="text" id="email" name="email" placeholder="Your Email" class="radius" />
              </p>
              <p>
                  <input type="text" id="remail" name="remail" placeholder="Re-enter Email" class="radius" />
              </p>
              <p>
                  <input type="password" id="password" name="password" placeholder="New Password" class="radius" />
              </p>
              <p>
                  <button class="radius title" name="signup" type="submit">Sign Up</button>
              </p>
        }
      </div> 

I would like to validate all the input fields in the view. Could you please help me? Thanks in advance.

Answer 1

There are two different way to validate one by using MVC framewrok provided Helper methods that allow to make validation on client side and second by using just jQuery validation on client side but the first one is best to validate that will perform validation on both side server side and client side.

By using Helper Method

in the view

 <div class="registrationForm">
      @using (Html.BeginForm("Registration", "Login", FormMethod.Post, new { enctype = "multipart/form-data" }))
      {
          <p>
             @Html.TextBoxFor(m => m.firstName, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.firstName)

             @Html.TextBoxFor(m => m.lastname, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.lastname)
          </p>
          <p>

             @Html.TextBoxFor(m => m.email, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.email)             
          </p>
          <p>

             @Html.TextBoxFor(m => m.remail, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.remail)  

          </p>
          <p>

             @Html.TextBoxFor(m => m.password, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.password)  

          </p>
          <p>
          <input class="radius title" name="signup" type="submit" value="Sign Up">
          </p>
    }
  </div> 

 <script src="~/Scripts/jquery.validate.min.js"></script>

**Note : ** dont forget to include jquery.validate.min.js

ModelView Class

public class RegisterViewModel
{
    [Required]
    [Display(Name = "Enter first name")]
    public string firstname{ get; set; }

    [Required]
    [Display(Name = "Enter lastname")]
    public string lastname{ get; set; }

    [Required]
    [Display(Name = "Enter Email")]
    public string email{ get; set; }

    [Required]
    [Display(Name = "Reenter email")]
    public string remail{ get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}

Controller->Action

    public ActionResult Registration(RegisterViewModel model)
    {
        if (ModelState.IsValid)
        {
          /// you logic
        }
    }