ASP.NET Mvc 2 How do you launch client side validation from inside javascript?

Question

Is there a function for ASP.NET MVC 2 built in data annotation javascript validation that performs the functionality of Jquery.Validate's isValid()?

I'd like to check if my fields are valid prior to using jquery ajax to send data to the server? Any suggestions?

Thank You.

Answer 1

Seems that there is nothing special in MicrosoftMvcJQueryValidation.js except for registration of rules for jquery.validate.js plugin.

This worked for me:

<script type="text/javascript">

    function validateForm(formId)
    {
       var valid = $("#" + formId).validate().form();
       return valid;
    }

</script>

Answer 2

Hi
Scott Guh describe simple js validation step by step in this post: http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx (look for step3).
It is not JQuery but wouldn't that fit your needs?

--
Dom

Answer 3

Have a look at xval. It lets you define your validation rules either using data annotation attributes or castle validation attributes (I think nhibernate validation has also been added recently). Validation is then converted to client validation rules and you can validate a form using ajax so no postback to the server.

From the project page: xVal is a validation framework for ASP.NET MVC applications. It makes it easy to link up your choice of server-side validation mechanism with your choice of client-side validation library, neatly fitting both into ASP.NET MVC architecture and conventions.

If you are only after validation mechanisms for asp.net mvc then have a look at this and this

Answer 4

Jquery will be your best friend

check this http://bassistance.de/jquery-plugins/jquery-plugin-validation/

document link:http://docs.jquery.com/Plugins/Validation

Answer 5

You can enable client-side validation via <% Html.EnableClientValidation(); %> It will automatically generate all the javascript code you need to the server-side validation to work on the client-side. Remember to still check on the server-side, since the client can bypass javascript and send bad data. Do not use client-side validation only.

<% Html.EnableClientValidation(); %>

<%-- Html.EnableClientValidation(); --%> <%-- you can comment it out like this :) and it will not appear in the generated webpage --%>

<%= Html.ValidationSummary() %>
<% using (Html.BeginForm()) {%>

    <%=Html.EditorForModel() %>     
        <p>
            <input type="submit" value="Save" />
        </p>
<% } %>

Answer 6

here is a simple program will guide how to do client side validation of Form in JavaScript.

Name : <asp:TextBox ID="txtName" />
Email : <asp:TextBox ID="txtEmail" />
Web URL : <asp:TextBox ID="txtWebUrl" />
Zip : <asp:TextBox ID="txtZip" />
<asp:Button ID="btnSubmit" OnClientClick=" return validate()" runat="server" Text="Submit" />

Now on the source code of this form in script tag write the following code:

<script language="javascript" type="text/javascript">
function validate()
{
      if (document.getElementById("<%=txtName.ClientID%>").value=="")
      {
                 alert("Name Feild can not be blank");
                 document.getElementById("<%=txtName.ClientID%>").focus();
                 return false;
      }
      if(document.getElementById("<%=txtEmail.ClientID %>").value=="")
      {
                 alert("Email id can not be blank");
                document.getElementById("<%=txtEmail.ClientID %>").focus();
                return false;
      }
     var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
     var emailid=document.getElementById("<%=txtEmail.ClientID %>").value;
     var matchArray = emailid.match(emailPat);
     if (matchArray == null)
    {
               alert("Your email address seems incorrect. Please try again.");
               document.getElementById("<%=txtEmail.ClientID %>").focus();
               return false;
    }
    if(document.getElementById("<%=txtWebURL.ClientID %>").value=="")
    {
               alert("Web URL can not be blank");
               document.getElementById("<%=txtWebURL.ClientID %>").value="http://"
               document.getElementById("<%=txtWebURL.ClientID %>").focus();
               return false;
    }
    var Url="^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"
    var tempURL=document.getElementById("<%=txtWebURL.ClientID%>").value;
    var matchURL=tempURL.match(Url);
     if(matchURL==null)
     {
               alert("Web URL does not look valid");
               document.getElementById("<%=txtWebURL.ClientID %>").focus();
               return false;
     }
     if (document.getElementById("<%=txtZIP.ClientID%>").value=="")
     {
               alert("Zip Code is not valid");
               document.getElementById("<%=txtZIP.ClientID%>").focus();
               return false;
     }
     var digits="0123456789";
     var temp;
     for (var i=0;i<document.getElementById("<%=txtZIP.ClientID %>").value.length;i++)
     {
               temp=document.getElementById("<%=txtZIP.ClientID%>").value.substring(i,i+1);
               if (digits.indexOf(temp)==-1)
               {
                        alert("Please enter correct zip code");
                        document.getElementById("<%=txtZIP.ClientID%>").focus();
                        return false;
               }
     }
     return true;
}
</script>

And in code behind file just write the below code.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
               btnSubmit.Attributes.Add("onclick", "return validate()")
End Sub

Now you will get a form with proper validation.

I hope this is going to help you

Answer 7

As basilmir and Dom Ribaut implies you should get this automatically if you EnableClientValidation(). However if you want to manually call client side MVC validation you can use:

if (!Sys.Mvc.FormContext.getValidationForForm($("#myform").get(0)).validate('submit').length) {
  // is valid
}

You can replace $("#myform").get(0) with the DOM element for your form.

Answer 8

i used the :
http://geekswithblogs.net/stun/archive/2010/02/27/asp.net-mvc-client-side-validation-summary-with-jquery-validation-plugin.aspx
and it worked great for me, especially you don't need to change the original Mvc Validation way(I mean the validation field), you just make it client side