bassistance jQuery Validation throwing errors

Question

Using bassistance.de's jQuery validation plugin, the validation do not always work, especially when an input that's initially been validated has its values removed.

The form will pass the validation test with the missing input, and the following error is also seen in the JS console.

Error

jQuery lib

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>

Form

<form id="payment-form" class="payment-form" method="POST" action="/checkout-process">
    <fieldset>
        <legend>Customer Info</legend>
        <label>Full Name</label>
        <input type="text" name="first_name" placeholder="First Name">
        <input type="text" name="last_name" placeholder="Last Name">
        <label>Email</label>
        <input type="text" name="email" placeholder="me@email.com">
        <label>Phone</label>
        <input type="text" name="phone" placeholder="Phone">
    </fieldset>
</form>

JS

$(function($) {

    // Validation
    $('#payment-form').validate({
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                phone: true
            }
        },

        errorClass: 'alert alert-error'
    });

});

Answer 1

The problem is with the rule phone, there is no validation method called phone.

If you include the additional-methods.js, then you can have phone validation rules like phoneUS, phoneUK, mobileUK, phoneNL etc

Ex:

$(function($) {

    // Validation
    $('#payment-form').validate({
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                phoneUS: true
            }
        },

        errorClass: 'alert alert-error'
    });

});

If none of these matches your requirement, then you may have to write a custom rule

Answer 2

Please check the links and make sure it resolves the exact url.