MrKal
MrKal

Reputation: 1

jQuery Validation form is not Validating and submitting

I've set all rules correctly, yet they seem to be ignored completely when I submit the Form.

Here is my code:

$(document).ready(function() {

  $('#formValidation').validate({
    rules: {
      name: {
        required: true,
        minlength: 2,
        lettersonly: true,
      },
      email: {
        required: true,
        minlength: 5,
        email: true,
      },
      feedback: {
        required: true,
        minWords: 5,
      },
    }
    messages: {
      name: {
        required: "Please enter your name",
      },
    },
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<form id="formValidation" onload="validate()">
  <p>Name: <br/><input type="text" name="name" /> </p>
  <p>Email:<br/><input type="email" name="email" /></p>
  <p>Feedback:<br/><input type="text" name="feedback" id="textfield" />
    <input type="submit" id="submit" onsubmit="return formValidation()" /> </p>
</form>

Upvotes: 0

Views: 178

Answers (1)

lshettyl
lshettyl

Reputation: 8171

So, all you need is the following.

$(document).ready(function () {

    $('#formValidation').validate({ 
        rules: {
            name: {
                required: true,
                minlength: 2,
                lettersonly:true,
            },
            email: {
                required: true,
                minlength: 5,
                email:true,
            },
            feedback: {
                required: true,
                minWords: 5,
            }
        },
        messages: {
            name:{
                required:"Please enter your name",
            }
        }
    });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<form id="formValidation" method="post">
    <p>Name: <br/><input type="text" name="name" /> </p>
    <p>Email:<br/><input type="email" name="email" /></p>
    <p>Feedback:<br/><input type="text" name="feedback" id="textfield"/>
    <input type="submit" id="submit"/> </p>
</form>

  • Removed unnecessary/extra ,s from your script.
  • Remove inline event handlers

Upvotes: 1

Related Questions