Validate a form using Jquery

Question

Does anyone have any idea why this code isn't working? It just takes me to a "not found" page upon submitting. I copied most of it from Learning Jquery.com but it still doesn't work. My id's and names match up so it can't be that. The site did say i'd maybe have to download the JQuery library but surely just linking to the library would work as well. The first snippet is the Jquery, the second my CSS and the third my HTML (in there you can see the src i used to link to the JQuery library.

$("#contactForm").validate({
  //specify the validation rules
  rules: {
    firstname: "required",
    lastname: "required",
    email: {
      required: true,
      email: true //email is required AND must be in the form of a valid email address
    },
    password: {
      required: true,
      minlength: 6
    }
  },

  //specify validation error messages
  messages: {
    firstname: "First Name field cannot be blank!",
    lastname: "Last Name field cannot be blank!",
    password: {
      required: "Password field cannot be blank!",
      minlength: "Your password must be at least 6 characters long"
    },
    email: "Please enter a valid email address"
  },

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

});

.form-container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}

form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}

form .error {
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<div class="form-container">
  <h2>Registration</h2>
  <form action="#" name="contactForm" id="contactForm">
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John" />

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe" />

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com" />

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" />

    <button type="submit">Submit</button>
  </form>

What is the URL for the "not found" page that it takes you to? *Should* that URL work? Why? When you load the page, are there any errors in the browser's debugging console? Did you load jQuery? — David, Nov 06 '17 at 11:28
I just updated your question with cdn links for https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js and https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js. Your code seems to work as expected — Master Yoda, Nov 06 '17 at 11:31

score 0 · Accepted Answer · answered Nov 06 '17 at 11:29

0

you need to include Jquery library reference.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

answered Nov 06 '17 at 11:29

Yahya Mukhtar

474
5
13

Thank you that worked a dream. I thought that i had already sources the jquery library. I'll give you the green tick once it lets me. – Matthew Wallace Nov 06 '17 at 11:34

score 0 · Answer 2 · answered Nov 06 '17 at 11:34

0

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

Try import this jQuery lib.

answered Nov 06 '17 at 11:34

qingqing

1
2

Validate a form using Jquery

2 Answers2