Can I restrict client-side validation to specific fields?

Question

I have a Form where I successfully use unobtrusive-validation with the [remote] annotation. I have other fields in the Form with [required] annotation in the model but I don't want client-side validation for these fields.

I only want server-side validation for [required] fields

I haven't found a solution and I wonder if it's easily feasible?

EDIT :

A part of my code

Part of my model :

I would like the first field : "Email" use Unobtrusive-validation and the second one : "PasswordHash" only use server-side validation even if it has [required] annotation.

Finally, i don't want an AJAX error message for all my form 's fields.

[Required(ErrorMessageResourceType = typeof(Project.Resources.Models.Accounts.User), ErrorMessageResourceName = "EMAIL_REQUIRED")]
[Display(Name = "EMAIL_DISPLAY", ResourceType = typeof(Project.Resources.Models.Accounts.User))]
[Remote("EmailExists", "User", "An account with this email address already exists.")]
public string Email { get; set; }

[Required(ErrorMessageResourceType = typeof(Project.Resources.Models.Accounts.User), ErrorMessageResourceName = "PASSWORDHASH_REQUIRED")]
[DataType(DataType.Password)]
[Display(Name = "PASSWORDHASH_DISPLAY", ResourceType = typeof(Project.Resources.Models.Accounts.User))]
public string PasswordHash { get; set; }

Part of the action in Controller Server-side validation :

    [HttpPost]
    public ActionResult Register(User user)
    {

        if (ModelState.IsValid )
        {   

            DataContext.User.Add(user);
            DataContext.SaveChanges();

            return RedirectToAction("Index");
        }

        return View(user);
    }

Ajax validation :

public JsonResult EmailExists(string email)
{
    User user = DataContext.User.SingleOrDefault(x => x.Email == email);

    return user == null ?
        Json(true, JsonRequestBehavior.AllowGet) :
        Json(
            string.Format("an account for address {0} already exists.",
            email), JsonRequestBehavior.AllowGet);
}

Part of the view :

 @using (Html.BeginForm())
 {
    @Html.ValidationSummary(true)


    <div class="editor-label">
        @Html.LabelFor(model => model.Email)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PasswordHash)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PasswordHash)
        @Html.ValidationMessageFor(model => model.PasswordHash)
    </div>

    <p>
        <input type="submit" name="op" id="edit-submit" value="@Project.Resources.Views.User.Register.SUBMIT_FORM" class="form-submit art-button" />
    </p>
 }

When I click on the sumbit button i would like a server-side validation.

And for some specific fields like Email i would like an Ajax Validation.

Answer 1

there might be better ways, but one way to accomplish this is to do the following

@using (Html.BeginForm("Register", "Home", FormMethod.Post, new { id = "registerForm" }))
 {
    @Html.ValidationSummary(true)


    <div class="editor-label">
        @Html.LabelFor(model => model.Email)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PasswordHash)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PasswordHash)
        @Html.ValidationMessageFor(model => model.PasswordHash)
    </div>

    <p>
        <input type="submit" name="op" id="edit-submit" value="@Project.Resources.Views.User.Register.SUBMIT_FORM" class="form-submit art-button" />
    </p>
 }

<script type="text/javascript">

    // add the rules for the fields that you want client-side validation on
    // leave out the fields that you dont want client-side validation. they will be validated 
    // on server side.
    $("#registerForm").validate({
        rules: {
            Email: { required: true }
        },
        messages: {
            Email: { required : "Email is required" }
        }
    });
</script>