CODEWITHSUNDEEP
jqueryasp.net-mvc
coder231
coder231

Reputation: 463

jquery validation not working with mvc

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 ?

Upvotes: 0

Views: 1845

Answers (3)

chenZ
chenZ

Reputation: 930

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

Upvotes: 1

Omid Nasri
Omid Nasri

Reputation: 179

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.

Upvotes: 1

coder231
coder231

Reputation: 463

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..

Upvotes: 1

Related Questions