Why does not work jquery validation?

Question

I have form with one field, and I validating this field by means of jquery validation. But my form sand in all case but in js I inject constrains, validation does't work.

Help me fix this issue. Thank You.

This is form in index.html:

<head>
    <title>Form</title>

    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <script src="jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js"></script>
    <script src="validation.js"></script>

</head>
<body>
    <div class="p-x-1 p-y-3">
        <form id="form" class="card card-block m-x-auto bg-faded form-width" method="POST" action="go" name="validation">
            <legend class="m-b-1 text-xs-center">Enter data</legend>

            <div class="form-group input-group">
                <span class="has-float-label">
                <input class="form-control" name="name" id="name" type="text" placeholder="Name"/>
                <label for="name">Name</label>
                </span>
            </div>

            <div class="text-xs-center">
                <button class="btn btn-block btn-primary" type="submit">Edit</button>
            </div>

        </form>
    </div>
</body>

This is js script for validation:

$(function() {
  // Form contain attribute name="registration".
  $("form[name='validation']").validate({
    rules: {
      name: {
        required: true,
        minlength: 5
      }
    },

    // Error message.
    messages: {
      name: "Error"
    },

    submitHandler: function(form) {
      form.submit();
    }
  });
});

I have jquery-validation library in same folder what index.html.

your jquery min js should be always on the top of all other js move this <script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js"></script> to top of all js — Curiousdev
– Curiousdev, Commented Jun 23, 2017 at 11:39
if you want run the jquery plugin means you need to include the jquey first then jquery plugin . @pavul — JYoThI
– JYoThI, Commented Jun 23, 2017 at 11:42
My two cents: is this src= a typo? src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js" — Phugo
– Phugo, Commented Jun 23, 2017 at 11:42

Abhishek Anand · Accepted Answer · 2017-06-23 12:24:44Z

2

Your code import css and js in this order

    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <script src="jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js"></script>
    <script src="validation.js"></script>

but you should import jquery first and then it's extentions i.e. , jquery validation. I would also recommend using jquery before importing bootstrap component file, to be on the safer side. So, Your correct order of import will be :-

    <script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"/>
    <link href="style.css" rel="stylesheet">
    <script src="jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="validation.js"></script>

Although, this is out of context but ,you should import your custom css after the bootstrap css file.

answered Jun 23, 2017 at 12:24

Abhishek Anand

463 bronze badges

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

1 Comment

Pavel Over a year ago

this is don't stop sending empty form, may be I have more mistakes? When I click on button then browser send me to action="go" add /go to path. But idea validation: If form is empty or name length less 5 symbol name: {required: true, minlength: 5 } then I stay on same page and get messages: {name: "Error"}. Why isn't work?

Alex Mac · Accepted Answer · 2017-06-23 11:42:09Z

2

Please swap both the scripts like given below.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="jquery-validation/dist/jquery.validate.min.js"></script>

When you use jQuery plugins, It always requires jQuery. In your case you have added validation library first and then jQuery, hence it's not worked.

edited Jun 23, 2017 at 11:42

answered Jun 23, 2017 at 11:38

Alex Mac

2,9931 gold badge24 silver badges39 bronze badges

4 Comments

gearsdigital Over a year ago

There is a typo too: src="src="//.

Alex Mac Over a year ago

Yup, Just I have changed.

Pavel Over a year ago

@Shyam Shingadiya my import:

<link href="style.css" rel="stylesheet"> 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" /> 	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js"></script> 	<script src="jquery-validation/dist/jquery.validate.min.js"></script> 	<script src="validation.js"></script>

same result, don't work. may be there are still errors?

Alex Mac Over a year ago

Can you please check your console and share errors.

Collectives™ on Stack Overflow

Why does not work jquery validation?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related