0

I had this working before... I can't figure out what's changed to break my validator plugin. When I click the submit button I'm getting an alert stating the form is valid when I've left many fields blank. I'm not getting any JS errors in the console.

Registration Form:

<div class="error_container">
                        <p>Please correct the following errors and try again:</p>
                        <ul />
                    </div>

                    <div class="registration">
                        <form class="pure-form pure-form-aligned" id="purchase_premium" action="javascript:" method="POST">
                            <legend>
                                <h1>Purchase Premium Access</h1>
                            </legend>

                            <fieldset>
                                <div class="pure-control-group">
                                    <label for="first_name">First Name:</label>
                                    <input id="first_name" type="text" value="Timothy" placeholder="First Name">
                                </div>

                                <div class="pure-control-group">
                                    <label for="last_name">Last Name:</label>
                                    <input id="last_name" type="text" value="Hemendinger" placeholder="Last Name">
                                </div>                              

                                <div class="pure-control-group">
                                    <label for="email">Email Address:</label>
                                    <input id="email" type="email" value="[email protected]" placeholder="Email Address">
                                </div>

                                <div class="pure-control-group">
                                    <label for="password">Password:</label>
                                    <input id="password" type="password" value="185869" placeholder="Password">
                                </div>

                                <div class="pure-control-group">
                                    <label for="password_confirm">Confirm Password:</label>
                                    <input id="password_confirm" type="password" value="185869" placeholder="Password">
                                </div>

                                <div class="pure-control-group">
                                    <label for="address">Address:</label>
                                    <input id="address" type="text" placeholder="Address" value="15 St.">
                                </div>                          

                                <div class="pure-control-group">
                                    <label for="city">City:</label>
                                    <input id="city" type="text" placeholder="City" value="Atlanta">
                                </div>

                                <div class="pure-control-group">
                                    <label for="state">State/Province:</label>
                                    <select id="state">
                                        <option value="">- Select Province/State -</option>
                                        <option value="AL">Alabama</option> 
                                        <option value="AK">Alaska</option> 
                                        <option value="AZ">Arizona</option> 
                                        <option value="AR">Arkansas</option> 
                                        <option value="CA">California</option> 
                                        <option value="CO">Colorado</option> 
                                        <option value="CT">Connecticut</option> 
                                        <option value="DE">Delaware</option> 
                                        <option value="DC">District Of Columbia</option> 
                                        <option value="FL">Florida</option> 
                                        <option value="GA" selected>Georgia</option> 
                                        <option value="HI">Hawaii</option> 
                                        <option value="ID">Idaho</option> 
                                        <option value="IL">Illinois</option> 
                                        <option value="IN">Indiana</option> 
                                        <option value="IA">Iowa</option> 
                                        <option value="KS">Kansas</option> 
                                        <option value="KY">Kentucky</option> 
                                        <option value="LA">Louisiana</option> 
                                        <option value="ME">Maine</option> 
                                        <option value="MD">Maryland</option> 
                                        <option value="MA">Massachusetts</option> 
                                        <option value="MI">Michigan</option> 
                                        <option value="MN">Minnesota</option> 
                                        <option value="MS">Mississippi</option> 
                                        <option value="MO">Missouri</option> 
                                        <option value="MT">Montana</option> 
                                        <option value="NE">Nebraska</option> 
                                        <option value="NV">Nevada</option> 
                                        <option value="NH">New Hampshire</option> 
                                        <option value="NJ">New Jersey</option> 
                                        <option value="NM">New Mexico</option> 
                                        <option value="NY">New York</option> 
                                        <option value="NC">North Carolina</option> 
                                        <option value="ND">North Dakota</option> 
                                        <option value="OH">Ohio</option> 
                                        <option value="OK">Oklahoma</option> 
                                        <option value="OR">Oregon</option> 
                                        <option value="PA">Pennsylvania</option> 
                                        <option value="RI">Rhode Island</option> 
                                        <option value="SC">South Carolina</option> 
                                        <option value="SD">South Dakota</option> 
                                        <option value="TN">Tennessee</option> 
                                        <option value="TX">Texas</option> 
                                        <option value="UT">Utah</option> 
                                        <option value="VT">Vermont</option> 
                                        <option value="VA">Virginia</option> 
                                        <option value="WA">Washington</option> 
                                        <option value="WV">West Virginia</option> 
                                        <option value="WI">Wisconsin</option> 
                                        <option value="WY">Wyoming</option>
                                    </select>    

                                </div>

                                <div class="pure-control-group">
                                    <label for="cc_number">Credit Card Number:</label>
                                    <input id="cc_number" type="text" value="4242424242424242">
                                </div>

                                <div class="pure-control-group">
                                    <label for="cc_expiration_month">Expiration Date:</label>

                                    <select id="cc_expiration_month">
                                        <option value="1">January</option>
                                        <option value="2">February</option>
                                        <option value="3">March</option>
                                        <option value="4">April</option>
                                        <option value="5">May</option>
                                        <option value="6" selected>June</option>
                                        <option value="7">July</option>
                                        <option value="8">August</option>
                                        <option value="9">September</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                    </select>

                                    <select id="cc_expiration_year">
                                        <option value="2014">2014</option>
                                        <option value="2015" selected>2015</option>
                                        <option value="2016">2016</option>
                                        <option value="2017">2017</option>
                                        <option value="2018">2018</option>
                                        <option value="2019">2019</option>
                                        <option value="2020">2020</option>
                                        <option value="2021">2021</option>
                                        <option value="2022">2022</option>
                                    </select>

                                </div>

                                <div class="pure-control-group">
                                    <label for="cc_cvc">CVV/CVC Security Code:</label>
                                    <input id="cc_cvc" type="text" value='697'>
                                </div>

                                <div class="pure-control-group">
                                    <label for="account_type">Account Type:</label>
                                    <select id="account_type">
                                        <option value="">--- Choose One ----</option>
                                        <option value="30-day">30-Day Access</option>
                                        <option value="1-year">One-Year Subscription</option>
                                    </select>
                                </div>

                                <div style="margin-left: 55px; padding-top: 25px; margin-bottom: 15px;">

                                    <input type="checkbox" id="terms" style="margin-right: 20px;"><label for="terms">I agree to the</label> <a href="#" id="terms_link">Terms & Conditions</a>

                                </div>

                                 <button id="purchase_submit" class="pure-button pure-button-primary">Submit</button>

                            </fieldset>
                        </form>

Validator code:

<script src="js/validate.js"></script>

<script>
$(function() {

    $('#purchase_submit').on('click', function(e){

        $("#purchase_premium").validate({
            onkeyup: false,    
            onfocusout: false, 
            onclick: false,
            rules: {
                account_type: "required",
                first_name: "required",
                last_name: "required",
                address: "required",
                city: "required",
                email: "required",
                state: "required",
                cc_number: {
                    required: true,
                    creditcard: true
                },
                cc_cvc: "required",
                    password: {
                        required: true,
                        minlength : 6
                    },
                    password_confirm: {
                      equalTo: "#password"
                    }                   
            },
            messages: {
                account_type: "Please select an account type.",
                first_name: "Please enter your first name",
                last_name: "Please enter your last name",
                address: "Please enter your address",
                city: "Please enter your city",
                email: "Please enter a valid email address",
                state: "Please select a state/province",
                cc_number: "Please enter a valid credit card number",
                cc_cvc: "Please enter a valid CVV/CVC Security Code",
                password: {
                    required: "Please enter a password.",
                    minlength: "Your password must be at least 6 characters in length",
                }

            },
            errorContainer: $('.error_container'),
            errorLabelContainer: $('.error_container ul'),
            wrapper: 'li'
        });

        jQuery.extend(jQuery.validator.messages, {

            equalTo: "Your two passwords do not match"

        });

        if ($("#purchase_premium").valid()) {
            alert('valid');
            e.preventDefault();
            //$("#purchase_premium").submit();
        } else {
            e.preventDefault();
        }


    });
});

</script>
Improve this question
4
  • Is this script below the body? If not this could be the issue. Commented May 6, 2014 at 20:08
  • nope, just before body closing tag Commented May 6, 2014 at 20:10
  • @TimAych let me know if my answer didn't helped Commented May 6, 2014 at 21:33
  • @TimAych let me know if something wrong :P Commented May 6, 2014 at 22:28

1 Answer 1

Reset to default
3
  1. You put .validate() function to the .onclick function. It is not correct.
  2. You didn't specified names attributes for each <input .. />

Problem is solved there.

Use this:

$().ready(function () {
    var container = $('.error_container');
    $("#purchase_premium").validate({
        onkeyup: false,
        onfocusout: false,
        errorContainer: container,
        errorLabelContainer: $("ol", container),
        wrapper: 'li',
        rules: {
            account_type: {
                required: true
            },
            first_name: {
                required: true
            },
            last_name: {
                required: true
            },
            address: {
                required: true
            },
            city: {
                required: true
            },
            email: {
                required: true
            },
            state: {
                required: true
            },
            cc_number: {
                required: true,
                creditcard: true
            },
            cc_cvc: "required",
            password: {
                required: true,
                minlength: 6
            },
            password_confirm: {
                equalTo: "#password"
            }
        },
        messages: {
            account_type: "Please select an account type.",
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            address: "Please enter your address",
            city: "Please enter your city",
            email: "Please enter a valid email address",
            state: "Please select a state/province",
            cc_number: "Please enter a valid credit card number",
            cc_cvc: "Please enter a valid CVV/CVC Security Code",
            password: {
                required: "Please enter a password.",
                minlength: "Your password must be at least 6 characters in length",
            }
    },
    submitHandler: function (form) {
        alert('valid');
        // you can access form by `form` tag, for example $(form).serialize()
    }

});

jQuery.extend(jQuery.validator.messages, {

    equalTo: "Your two passwords do not match"

});


// if ($("#purchase_premium").valid()) {
//  alert('valid');
//  e.preventDefault();
//              //$("#purchase_premium").submit();
//          } else {
//              e.preventDefault();
//          }



});

Also, if you want to do something when form is valid, use submitHandler handler:

$("#purchase_premium").validate({
    // set some properties
    // messages and 
    // rules
    submitHandler: function(form) {
        alert('valid');
        // you can access form by `form` tag, for example $(form).serialize()
    }
});

Also, your html is not valid. You use:

<input id="last_name" name='last_name' type="text" placeholder="Last Name">

But you have to use:

<input id="last_name" name='last_name' type="text" placeholder="Last Name" />

Note this / symbol at the end.

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

2 Comments

@TimAych create fiddle with your problem
Thank you so much. I completely forgot that I'd taken all the name attributes off of everything when beginning on working on credit card submission (I didn't want any CC numbers touching my server at all as a security measure). I appreciate it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.