validating form in MVC3 using javascript

Question

I just need example for one validation. For remaining I will do. Let's say I have an input of type text:

 <p>                          
<label for="ClientName">ClientName:</label> <%= Html.TextBoxFor(model => model.Name)%>         
 </p>

Here I want to validate textbox for required field. I want this required field validation function in JavaScript and I want to use this script in the view.

Be a little more clear. What have you done so far? Sample code? — Jibi Abraham
– Jibi Abraham, Commented Feb 29, 2012 at 10:30
i want to write a javascrpt function(for ex:validating a textbox) just like what we do in asp.net.But i want to use tht .js file in MVC3/MVC2. — Santosh
– Santosh, Commented Feb 29, 2012 at 10:40
weblogs.asp.net/mikaelsoderstrom/archive/2010/10/06/… something like in the above link. — Santosh
– Santosh, Commented Feb 29, 2012 at 10:43
-1 - The question is too brief to allow anyone to help you and shows no effort on your part to try to implement a solution yourself. — Dangerous
– Dangerous, Commented Feb 29, 2012 at 11:05
@Dangerous iam completely new to MVC.so after searching many sites,i culdnt get any solution atleast which may lead to start my work.so i posted here my requirement.how can you tellno effort from my side.i clearly said my reuirement — Santosh
– Santosh, Commented Feb 29, 2012 at 11:18

Tom Chantler · Accepted Answer · 2012-03-01 08:33:22Z

7

Have you considered using unobtrusive validation?

You say you are using MVC3 (although not the Razor view engine apparently).

With your code like this: <p><label for="ClientName">ClientName:</label> <%= Html.TextBoxFor(model => model.Name)%></p> which could be written as <p>@Html.LabelFor(model=>model.Name) @Html.TextBoxFor(model => model.Name) </p> in Razor syntax.

If you put this in your web.config:

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

and then decorate the property in your model with something like this data annotation:

[Display(Name = "Name")]
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }

Then by adding the following into your _Layout.cshtml file you will get unobtrusive validation to work:

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Then you could add this somewhere on the page (where you want the validation message to be shown): @Html.ValidationMessageFor(model=>model.Name)

answered Mar 1, 2012 at 8:33

Tom Chantler

15k4 gold badges50 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Berker Yüceer Over a year ago

yea i would recommend this solution. +1 for very simple explanation.

Santosh Over a year ago

yeah this solution works fine.but my requirement doesnt have any model.so i cannot use any dataannotations.

Berker Yüceer Over a year ago

you were asking for where to put a unique error msg here it is : [Required(ErrorMessage = "Name is required")]

Tom Chantler Over a year ago

Thanks Berker Yüceer! @ Santosh: You must have some kind of Model since you have this code in your question model => model.Name. If that's a ViewModel or whatever doesn't matter, you simply add the DataAnnotation to the Name property in there.

Deepakmahajan · Accepted Answer · 2012-02-29 11:03:55Z

2

Try this code.it work on my side you should try:

 <form id="formname" post="" action="">
<ul>
<li>
 <input type="text" name="TimeArrived" id="TimeArrived" class="required" /></li>
 <li><input type="text" name="Name" id="Name" class="required"   />
</li>
 <li>
    <input type="button" name="Save" value="Save" onclick="return Submit();" /></li>
   </ul>
</form>

 $(document).ready(function () {
        var frm = $("#formname");
        frm.validate();
    });

 function Submit() {
  var f = $("#formname");

 if (f.valid())
{
}
}

answered Feb 29, 2012 at 11:03

Deepakmahajan

8661 gold badge11 silver badges24 bronze badges

4 Comments

Santosh Over a year ago

thanks @deepak.i need something like this.but iam writing all my validation functions in one .js file.i want to use that .js file here. function onlyNumbers(evt) { var e = event || evt; // for trans-browser compatibility var charCode = e.which || e.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } like this,i have few more function in .js file.i want to use them for "Submit" button

Santosh Over a year ago

the above code didnt work for me.where are you displaying your errormessages

Berker Yüceer Over a year ago

Santosh Over a year ago

@BerkerYüceer thanks for the reply.The above way is not working for me.can u please give with some elaborate example. I need a requiredfieldvalidation for the following textbox <p> <label for="ClientName">ClientName:</label> <%= Html.TextBoxFor(model => model.Name)%> </p> some javascript function to validate on button click. Thanks in advance

Berker Yüceer · Accepted Answer · 2012-03-01 14:59:06Z

Now <%= Html.TextBoxFor(model => model.Name)%> is the key here u should give an ID to each of your elements that you want to use validation on..

so its gonna look like;

<%= Html.TextBoxFor(model => model.Name,new { id="ClientNameTxt"})%>

if you already defined some scripts (.js files) and want to implement to this view then use

<script src="@Url.Content("~/Scripts/yourjsfile.js")" type="text/javascript"></script>

and use ur functions to validate or else write new script

<script type="text/javascript">
    $(document).ready(function () {
        var frm = $("#formname");
        frm.validate();
    });

    $('#formname').Submit(function (event) {
        /* Call ur form with the id you have given */
        var f = $("#formname");

        if (f.valid()) {  /* When the form is valid */

        } else {  /* When the form is not valid */
            event.preventDefault(); /* Prevent from submitting the form */
            $("#ClientNameTxt").highlight(); /* Do some validation stuff on ur validation required element */
        }
    });
</script>

at the end it will look like;

                 <!--Your form name, Controller name-->         
@using (Html.BeginForm("Formname", "ControllerName", FormMethod.Post,new { id="Formname", onkeypress="return event.keyCode != 13;"}))
{
    <p> 
        <label for="ClientName">ClientName:</label> <!--Give an ID to your element-->
        <%= Html.TextBoxFor(model => model.Name, new { id="ClientNameTxt" })%>
    </p>
}

<script type="text/javascript">
    $(document).ready(function () {
        var frm = $("#formname");
        frm.validate();
    });

    $('#formname').Submit(function (event) {
        /* Call ur form with the id you have given */
        var f = $("#formname");

        if (f.valid()) {  /* When the form is valid */

        } else {   /* When the form is not valid */
            event.preventDefault(); /* Prevent from submitting the form */
            $("#ClientNameTxt").highlight(); /* Do some validation stuff on ur validation required element */
            $("#Formname").append('<ul><li> Fill the empty areas and try again. <li><ul>');
            /* This is the worst i can do. Just to let you understand it easly. */
        }
    });
</script>

if u still have problems with this issue! i guess ur solution is at training your self with the --> jquery

howto/whereto write error messages.iam new to Jquery. and what about button "Submit".I place a button and should there be any return for that
as you can see i ve added a highlight to that input! you can use a similar way and put some error msg. im going to update the answer look carefully at the else { } section.

Collectives™ on Stack Overflow

validating form in MVC3 using javascript

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related