JQuery Validation issue with accepting only digits.

Question

I have a form I am trying to validate. This is the html

<h2>Personal Details</h2>
            <p>Please enter in some information about you.</p>
            <div id="form-row">
                <label>Name</label>
                <input type="text" name="name" value="" id="name" required/>
            </div>
            <div id="form-row">
                <label>Telephone</label>
                <input type="text" name="telephone" value="" id="telephone" required/>
            </div>
            <div id="form-row">
                <label>Email</label>
                <input type="email" name="email" value="" id="email" required/>
    </div>

I need to use some form of validation so I opted to use jQuery validation plugin called .validate. This is my script

$(document).ready(function($) {
    //When the form is submitted do this...
    $("#stripe-payment-form").submit(function(event) {

        //Validation
        // just for the demos, avoids form submit
        $.validator.setDefaults({
            debug: true,
            success: "valid"
        });

        $( "#stripe-payment-form" ).validate({
            rules: {
                telephone: {
                    required: true,
                    digits: true
                    }
            }
        });

When the page loads the first time I get no errors and validation is working. However If input 'aaa' into the telephone input I get this error and no validation occurs:

TypeError: $.validator is undefined

Does anyone know why this is happening? I was following along the documentation on

http://jqueryvalidation.org/digits-method

For starters, don't put your setDefaults code in the submit function, as it will get run every time the form is submitted. Leave it in the doc.ready — James Sutherland
– James Sutherland, Commented Dec 18, 2014 at 12:52
IDs must be unique on document context, IIRC, this is not the first time we have to say that to you... — A. Wolff
– A. Wolff, Commented Dec 18, 2014 at 12:57
My id's are unique...name, telephone, email? If your talking about the divs I can see that but I don't see how they would affect the issue im having at present — Javacadabra
– Javacadabra, Commented Dec 18, 2014 at 13:11
'<script src="jqueryvalidation.org/files/dist/…> <script src="jqueryvalidation.org/files/dist/…>' have you included these files — Ankit Chaudhary
– Ankit Chaudhary, Commented Dec 18, 2014 at 13:12

Ryley · Accepted Answer · 2014-12-18 17:17:47Z

2

You need to include the jquery.validate.js file after jquery, like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

Also, your javascript code should look more like this:

$(document).ready(function() {
    $( "#stripe-payment-form" ).validate({
        rules: {
            telephone: {
                required: true,
                digits: true
                }
        }
    });
});

No need to wrap it in the form submit event. It will do that by itself. If there are other things you want to do on form submit, use the submitHandler option.

answered Dec 18, 2014 at 17:17

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

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

Comments

Ahmad Asjad · Accepted Answer · 2015-02-24 22:31:10Z

0

you can also do your code by developing a function and calling it according to your requirement.

var only_Number;
$(function(){
    $('.onlynumber').keypress(function(){
        return only_Number();
    });

    only_Number=function(evt){
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
});

Also have a look on codepen: http://codepen.io/ahmadasjad/pen/bNMmya

answered Feb 24, 2015 at 22:31

Ahmad Asjad

8231 gold badge9 silver badges30 bronze badges

Collectives™ on Stack Overflow

JQuery Validation issue with accepting only digits.

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related