jQuery Validate plugin button not working, and digits field

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 [email protected]"
        },
        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.

You need type="submit". type="button" is intentionally ignored. — Sparky
– Sparky, Commented Jun 5, 2015 at 22:36

Abhishekh Gupta · Accepted Answer · 2015-06-05 21:58:48Z

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.

answered Jun 5, 2015 at 21:58

Abhishekh Gupta

6,2464 gold badges20 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sparky · Accepted Answer · 2015-06-05 23:13:29Z

0

Two problems here:

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

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

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/

edited Jun 5, 2015 at 23:13

answered Jun 5, 2015 at 22:58

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

5 Comments

ufollettu Over a year ago

Thanks, it works now! a misspelled word made me go crazy! I prefer a custom rule because the required field format does not work with built-in rules. I also removed the additional-methods.js file and it works fine anyway.

ufollettu Over a year ago

the last thing: how to reset phone input field when refresh page?

Sparky Over a year ago

@ufollettu, how do you mean? If you "refresh" the page, then everything will re-load fresh from scratch.

ufollettu Over a year ago

is a firefox bug: stackoverflow.com/questions/7377301/…

Sparky Over a year ago

@ufollettu, the "autocomplete" feature is not a "bug" when it's doing exactly what it's supposed to do.

Collectives™ on Stack Overflow

jQuery Validate plugin button not working, and digits field

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related