jQuery Validate plugin button not working, and dig

Question

I've a lot of problem with a simple plugin, jquery validation plugin: I need to set a form with 3 fields, the name (required) the email (required, email format), the phone (not required, number format of 11 digits).

this is the html:

<form class="form" id="contactusform">
<div class="row">
    <div class="col-sm-4 form-label">
    <label for="cname">Contact Name*</label>
    </div>
    <div class="col-sm-6 form-row">
    <input id="cname" name="name" type="text" class="form-field" required>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 form-label">
    <label for="cemail">Contact Email Address*</label>
    </div>
    <div class="col-sm-6 form-row">
    <input id="cemail" name="email" type="email"  class="form-field" required>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 form-label">
    <label for="cphone">Contact Phone Number</label>
    </div>
    <div class="col-sm-6 form-row">
    <input id="cphone" name="phone" type="text" class="form-field">
    </div>
</div>
<div class="row">
    <div class="col-sm-6 form-send-button">
    <div class="">
    <input id="submit" type="button" class="btn send-button" value="SEND">
    </div>
    </div>
</div>

this is the script:

$(document).ready(function () {
    $("#contactusform").validate({
      rules: {
        name: "required",
        email: {
          required: true,
          email: true
        },
        phone: {
            required: false,
            digits: true,
            minlenght: 11
        }
      },
      messages: {
        name: "Please specify your name",
        email: {
            required: "We need your email address to contact you",
            email: "Email must be in the format of [e-mail]"
        },
        phone: {
            minlenght: "please insert a number of 11 digits",
            digits: "The value must be a number"
        }
      }
    });
});

I'm using the validator plugin and jquery scripts:

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script>

This code not work properly, I try many times, and the button doesn't seems to work at all. I need to show message under the reuided fields if submit button is clicked without any value in the fields.

Answer 1

Two problems here:

1. Change type="button" into type="submit" to get the submit button working.

   <input id="submit" type="submit" class="btn send-button" value="SEND">
   

2. You've misspelled the minlength rule as minlenght both within your rules and messages options.

   phone: {
       // required: false,  // superfluous
       digits: true,
       minlength: 11
   }
   

Notes:

• Since you've included the additional-methods.js file, you could just used one of the built-in phone number rules instead.

  • phoneUS
  • phoneUK
  • phonesUK
  • phoneNL
  • mobileNL
  • mobileUK

• You do not need to explicitly set required to false. Simply leaving out the required rule is enough.

• You would use the placeholder, {0}, within your custom message. Then the message automatically uses the same parameter as the rule.

  minlength: "please insert a number of {0} digits"
  

Working DEMO: http://jsfiddle.net/fbhacfy4/

Answer 2

You are almost there, you just need to change the type of button to submit.

<input id="submit" type="submit" class="btn send-button" value="SEND">

Here is the jsfiddle.