输入有效输入并提交表单时，其余的输入字段为空，JS验证不会运行

Question

I am developing a web directory with a form on one of its pages. JS validation plug in is used. While submitting the form without filling any Input fields, the form throws errors below each input field as expected! But submitting the form with just one input box filled in refreshes the current page as the action value is set to current page with PHP codes in it, instead of staying on the same page to continue to throw errors for the rest of the fields that are yet to be filled in! I have searched online to find nothing useful in figuring out what is wrong with the script. Could anyone here please look into the code below and recommend the best solution? Thanks.

$(document).ready(function()  {
    $("#userForm").validate({
        rules: {
            cname: {
                required: true,
                lettersonly: true,
                minlength: 3
            },
            cemail: {
                required: true,
                email: true
            },
            cphone: {
                required: true,
                number: true,
                minlength: 10,
                maxlength: 10
            },
            cbusiness: {
                required: true,
                url: true
            },
            cbcategory: {
                required: true,
                minlength: 6
            },
            curl: {
                required: true,
                minlength: 6
            },
        },
        messages: {
            cname:  "Please enter your name",
            cemail: "Please enter a valid email address",
            cphone: {
                required: "Please enter your phone number",
                number:   "Please enter only numeric value"
            },
            cbusiness: {
                required: "Please enter your business",
                },
            cbcategory: {
                required: "Please enter a business category",
                },
            curl: {
                required: "Please enter the URL to your website",
                },
            }
    });
});

The form is as below.

<form action="" method="post" name="userForm" id="userForm">

                            <input type="text" name="cname"  id="cname" placeholder=" Your Name">
                            <input type="text" name="cemail" id="cemail" class="email" placeholder="Your Email">
                            <input type="text" name="cphone" id="cphone" placeholder="Your Phone">
                            <input type="text" name="cbusiness"  id="cbusiness" class="email" placeholder=" Your Business">
                            <input type="text" name="cbcategory" id="cbcategory" placeholder="Business category">
                            <input type="text" name="curl" id="curl" class="email" placeholder="URL"><br>       

                            <label for='message'>Enter the code in the box below : </label>
                            <img src="captcha.php?rand=<?php echo rand();?>" id='captchaimg'>
                            <input type="text" id="captcha_code" name="captcha_code">

                            <input type="submit" name="Submit" id="Submit"  value="Submit" class="button1"><br>
                Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh.
                        </form>

Answer 1

Assuming you have included the validation libraries corectly, you will have to set messages for all of the validation types like:

messages: {
  cname: {
     required: "Please enter your name",
     lettersonly: "Letters only",
     minlength: "Min length 3 required"
  },
  cemail: {
    required: "Please enter a valid email address",
    email: "Invalid email"
  }
}

Working JSFIDDLE .

You have to include the plugin files something like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>

UPDATE :

After discussing with OP on chat, we came to the conclusion that the plugin files had to be included correctly and there was an incompatibility between the jQuery version(v 1.7.1) he used and the plugin version(v 1.16.0). So we had to add a custom method for lettersonly .

The code for custom method:

jQuery.validator.addMethod("lettersonly", function(value, element) {
  return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");