jquery validation not working with mvc

Question

I am trying to add a simple jquery validation to my webpage but the validation errors are not fired. When I try the same with fiddler it is working as expected. http://jsfiddle.net/qUYvS/381/

$("#form-wrap form").validate({
      rules: {
          Link: {
              required: true,
              url: true
          }
      },
      messages: {
          Link: {
              url: "Enter valid Url"
          }
      },
      submitHandler: function (form) {
          alert('valid form');
          form.submit();
      }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
    
<div id="form-wrap">
<form action="#" method="post"><input name="__RequestVerificationToken" type="hidden" value="GL-DZaLE0C8unpgVgzCSNK4ltxZZTPjI_O-oM4K01GBrnePo31eqlAeBgDHIVk5XwmqABEJh6h077x9nXu5JyCU5nv_TKWXZHfbfiAH-tvCXh6_1cARsW2cOj11P-IwmP9RiSeAl9WyyOOKV7dMhYg2" />        <div class="form-horizontal">      
            <div class="form-group">
                <label class="control-label col-md-2" for="Link">Link</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" id="Link" name="Link" type="text" value="" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="Link" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
</form></div>

This is the order in which bundles are rendered

<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.bootstrap.js"></script>
<script src="/Scripts/site/myscript-1.0.js"></script>

I am not sure why it is not working with my webpage when it does in fiddler. What is that I am missing here ?

Did u try this src="@Url.Content("pathofthescript")"

sakir
– sakir

2015-08-02 19:16:01 +00:00
Commented Aug 2, 2015 at 19:16 — sakir
– sakir, Commented Aug 2, 2015 at 19:16

coder231 · Accepted Answer · 2015-08-02 19:23:36Z

1

I finally figured out that I missed to remove the following scripts render lines in _layout.cshtml under tag.

  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
  @RenderSection("scripts", required: false)

It worked fine when I removed those..

answered Aug 2, 2015 at 19:23

coder231

4632 silver badges15 bronze badges

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

Comments

Omid Nasri · Accepted Answer · 2015-08-02 19:52:41Z

1

The best way, you can use the fire bug plugin in fire fox, debug in internet explorer or use edge browser in windows 10.

so for download fire bug click here.

In this link you can see document page.

answered Aug 2, 2015 at 19:52

Omid Nasri

1891 silver badge10 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:07:25Z

1

if you want write the valid rule you self,don't ref jquery.validate.unobtrusive.js
it will add the validation auto when page load
and in jquey.validate js,it will check if the validation is exist,if true,it will do nothing.
if you want add more rules ,you can use $(...).rules("add",{...})
check the doc http://jqueryvalidation.org/rules
i have answerd another question before,jQuery Unobtrusive client-side validation of custom attribute, you can see this

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Aug 3, 2015 at 6:19

chenZ

9404 silver badges16 bronze badges

Collectives™ on Stack Overflow

jquery validation not working with mvc

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related