CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Javacadabra
Javacadabra

Reputation: 5758

JQuery Validation issue with accepting only digits.

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

Upvotes: 0

Views: 601

Answers (2)

Ahmad Asjad
Ahmad Asjad

Reputation: 823

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

Upvotes: 0

Ryley
Ryley

Reputation: 21226

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.

Upvotes: 2

Related Questions