jQuery validate won't submit after check

Question

I'm trying to create a form that validates with the jQuery validate plugin. I have successfully implemented Validation so it checks the areas of the form that I want it to but now the form won't submit once the form input areas are filled in. can someone please provide some advice as to how I might be able to make it submit once validated.

also not necessary but would be nice is I would like the error message label to appear to the right or bottom of the form areas. Here is my code, any advice would be appreciated PS I am quite a novice sorry for bad formatting.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js">
</script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-
methods.min.js"></script>

<!------- Web page Content ------>


            <div id="content">


        <h2> Register with GTB Financial Solutions  </h2>   

        <form method="post" action="post-test.php" id="myform" name="myform" onsubmit="return validate();">

        How to maximise profits on managed funds<input type="checkbox" name="chkbox"><br>
        Minimising tax in the new environment<input type="checkbox" name="chkbox"><br>
        Measuring stock momentum<input type="checkbox" name="chkbox"><br>
        Economic forecasts<input type="checkbox" name="chkbox"><br>
        Creative accounting for management<input type="checkbox" name="chkbox"><br>
        The exciting new features of the ATO web site<input type="checkbox" name="chkbox"><br><br>      
        <label for="Fname">First Name</label><br>
        <input type="text" name="Fname"  id="Fname"><br>
        <label for="Lname">Last Name</label><br>
        <input type="text" name="Lname"  id="Lname"><br>
        <label for="Phone">Phone Number</label><br>
        <input type="text" name="Phone"  id="Phone"><br>
        <label for="E-mail">E-mail Address</label><br>
        <input type="email" name="email"  id="email"><br>
        <label for="Address">Address</label><br>
        <input type="text" name="Address"  id="Address"><br>



        <input type="submit" value="submit">
    </form>
    <script>

    jQuery.validator.setDefaults({
    debug: true,
    success: "valid",
    submitHandler: function() {
        alert("submitted!");
       }
   });
    $("#myform").validate({
        rules: {
            chkbox: {
                required: true,
            },
            Fname: "required",
            Lname: "required",
            Phone: "required",  
            Address: "required",
            email: {
                required: true,
                email: true
            },

        },
        messages: {
            Fname: "Please enter your firstname",
            Lname: "Please enter your lastname",
            Phone:  "Please enter your phone number",
            email: "Please enter a valid email address"

        }
    });

</script>


            </div>

    </div>

An edit request would be better @mrid as the user is new to Stackoverflow — Black Mamba

Govind Samrow Govind Samrow · Accepted Answer · 2017-09-21T06:15:08

Its working , Just remove onsubmit="return validate();" from form:

jQuery.validator.setDefaults({
  debug: true,
  success: "valid",
  submitHandler: function() {
    alert("submitted!");
  }
});
$("#myform").validate({
  rules: {
    chkbox: {
      required: true,
    },
    Fname: "required",
    Lname: "required",
    Phone: "required",
    Address: "required",
    email: {
      required: true,
      email: true
    },

  },
  messages: {
    Fname: "Please enter your firstname",
    Lname: "Please enter your lastname",
    Phone: "Please enter your phone number",
    email: "Please enter a valid email address"

  }
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js">
</script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-
methods.min.js"></script>

<!------- Web page Content ------>


<div id="content">


  <h2> Register with GTB Financial Solutions </h2>

  <form method="post" action="post-test.php" id="myform" name="myform" >

    How to maximise profits on managed funds<input type="checkbox" name="chkbox"><br> Minimising tax in the new environment<input type="checkbox" name="chkbox"><br> Measuring stock momentum<input type="checkbox" name="chkbox"><br> Economic forecasts
    <input
      type="checkbox" name="chkbox"><br> Creative accounting for management<input type="checkbox" name="chkbox"><br> The exciting new features of the ATO web site<input type="checkbox" name="chkbox"><br><br>
      <label for="Fname">First Name</label><br>
      <input type="text" name="Fname" id="Fname"><br>
      <label for="Lname">Last Name</label><br>
      <input type="text" name="Lname" id="Lname"><br>
      <label for="Phone">Phone Number</label><br>
      <input type="text" name="Phone" id="Phone"><br>
      <label for="E-mail">E-mail Address</label><br>
      <input type="email" name="email" id="email"><br>
      <label for="Address">Address</label><br>
      <input type="text" name="Address" id="Address"><br>

      <input type="submit" value="submit">
  </form>

</div>

jQuery validate won't submit after check

2 Answers